diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderGroup.js b/src/pixi/renderers/webgl/WebGLRenderGroup.js index 990d9be..47d8b96 100644 --- a/src/pixi/renderers/webgl/WebGLRenderGroup.js +++ b/src/pixi/renderers/webgl/WebGLRenderGroup.js @@ -18,16 +18,16 @@ PIXI.WebGLRenderGroup = function(gl, transparent) { this.gl = gl; - this.root; - - this.backgroundColor; - this.transparent = transparent == undefined ? true : transparent; - + this.root = null; + + this.backgroundColor = undefined; + this.transparent = transparent === undefined ? true : transparent; + this.batchs = []; this.toRemove = []; - console.log(this.transparent) + //console.log(this.transparent); this.filterManager = new PIXI.WebGLFilterManager(this.transparent); -} +}; // constructor PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup; @@ -37,22 +37,22 @@ * * @method setRenderable * @param displayObject {DisplayObject} - * @private + * @private */ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); - + displayObject.worldVisible = displayObject.visible; - + // soooooo // // to check if any batchs exist already?? - + // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); -} +}; /** * Renders the stage to its webgl view @@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer) { PIXI.WebGLRenderer.updateTextures(); - + var gl = this.gl; gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y); this.filterManager.begin(projection, buffer); - + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // will render all the elements in the group var renderable; - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - + renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); continue; } - + // render special this.renderSpecial(renderable, projection); } - -} +}; /** * Renders a specific displayObject @@ -109,13 +108,16 @@ // to do! // render part of the scene... - + var startIndex; var startBatchIndex; - + var endIndex; var endBatchIndex; - + var endBatch; + + var head; + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -130,25 +132,24 @@ } var startBatch = nextRenderable.batch; //console.log(nextRenderable); - + //console.log(renderable) if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; - - var head = startBatch.head; - var next = head; - + + head = startBatch.head; + // ok now we have the batch.. need to find the start index! - if(head == nextRenderable) + if(head === nextRenderable) { startIndex = 0; } else { startIndex = 1; - - while(head.__next != nextRenderable) + + while(head.__next !== nextRenderable) { startIndex++; head = head.__next; @@ -159,7 +160,7 @@ { startBatch = nextRenderable; } - + // Get the LAST renderable object var lastRenderable = displayObject.last; while(lastRenderable._iPrev) @@ -167,22 +168,22 @@ if(lastRenderable.renderable && lastRenderable.__renderGroup)break; lastRenderable = lastRenderable._iNext; } - + if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; - - var head = endBatch.head; - - if(head == lastRenderable) + + head = endBatch.head; + + if(head === lastRenderable) { endIndex = 0; } else { endIndex = 1; - - while(head.__next != lastRenderable) + + while(head.__next !== lastRenderable) { endIndex++; head = head.__next; @@ -193,11 +194,11 @@ { endBatch = lastRenderable; } - + //console.log(endBatch); // TODO - need to fold this up a bit! - - if(startBatch == endBatch) + + if(startBatch === endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { @@ -209,11 +210,11 @@ } return; } - + // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); - + // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { @@ -223,12 +224,13 @@ { this.renderSpecial(startBatch, projection); } - + // DO the middle batchs.. - for (var i=startBatchIndex+1; i < endBatchIndex; i++) + var renderable; + for (var i = startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; - + if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); @@ -238,7 +240,7 @@ this.renderSpecial(renderable, projection); } } - + // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { @@ -248,7 +250,7 @@ { this.renderSpecial(endBatch, projection); } -} +}; /** * Renders a specific renderable @@ -260,8 +262,8 @@ */ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) { - - var worldVisible = renderable.vcount === PIXI.visibleCount + + var worldVisible = renderable.vcount === PIXI.visibleCount; if(renderable instanceof PIXI.TilingSprite) @@ -284,9 +286,8 @@ { this.handleFilterBlock(renderable, projection); } -} +}; -flip = false; var maskStack = []; var maskPosition = 0; @@ -298,30 +299,30 @@ * for now only masks are supported.. */ var gl = PIXI.gl; - + if(filterBlock.open) { if(filterBlock.data instanceof Array) { this.filterManager.pushFilter(filterBlock); // ok so.. - + } else - { + { maskPosition++; - maskStack.push(filterBlock) - + maskStack.push(filterBlock); + gl.enable(gl.STENCIL_TEST); - + gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - + PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -335,27 +336,26 @@ } else { - var maskData = maskStack.pop(filterBlock) - + var maskData = maskStack.pop(filterBlock); if(maskData) { gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); PIXI.WebGLGraphics.renderGraphics(maskData.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - }; + } gl.disable(gl.STENCIL_TEST); } } -} +}; /** * Updates a webgl texture @@ -366,23 +366,23 @@ */ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { - + // TODO definitely can optimse this function.. - + this.removeObject(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; - while(previousRenderable != this.root) + while(previousRenderable !== this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -395,9 +395,9 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - + this.insertObject(displayObject, previousRenderable, nextRenderable); -} +}; /** * Adds filter blocks @@ -417,13 +417,13 @@ * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -431,13 +431,13 @@ * scene graph */ var previousRenderable2 = end; - while(previousRenderable2 != this.root.first) + while(previousRenderable2 !== this.root.first) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); -} +}; /** * Remove filter blocks @@ -451,7 +451,7 @@ { this.removeObject(start); this.removeObject(end); -} +}; /** * Adds a display object and children to the webgl context @@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ - + var previousRenderable = displayObject.first; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -489,26 +489,27 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - - // one the display object hits this. we can break the loop - + + // one the display object hits this. we can break the loop + var tempObject = displayObject.first; var testObject = displayObject.last._iNext; - do + + do { tempObject.__renderGroup = this; - + if(tempObject.renderable) { - + this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } - + tempObject = tempObject._iNext; } - while(tempObject != testObject) -} + while(tempObject !== testObject); +}; /** * Removes a display object and children to the webgl context @@ -519,18 +520,16 @@ */ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { - if(displayObject.__renderGroup != this)return; - -// var displayObject = displayObject.first; - var lastObject = displayObject.last; - do + if(displayObject.__renderGroup !== this) return; + + do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } - while(displayObject) -} + while(displayObject); +}; /** * Inserts a displayObject into the linked list @@ -546,22 +545,23 @@ // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; - + var index, batch; + /* * so now we have the next renderable and the previous renderable - * + * */ if(displayObject instanceof PIXI.Sprite) { - var previousBatch - var nextBatch - + var previousBatch; + var nextBatch; + if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { - if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; @@ -573,40 +573,40 @@ // TODO reword! previousBatch = previousSprite; } - + if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; - + //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { - if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { - if(nextBatch == previousBatch) + if(nextBatch === previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var batch = PIXI.WebGLRenderer.getBatch(); + batch = PIXI.WebGLRenderer.getBatch(); - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); - + return; } } @@ -615,39 +615,39 @@ else { // TODO re-word! - + nextBatch = nextSprite; } } - + /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ - - var batch = PIXI.WebGLRenderer.getBatch(); + + batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); - if(previousBatch) // if this is invalid it means + if(previousBatch) // if this is invalid it means { - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } - + return; } else if(displayObject instanceof PIXI.TilingSprite) { - + // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); - + } else if(displayObject instanceof PIXI.Strip) { @@ -655,20 +655,21 @@ this.initStrip(displayObject); // this.batchs.push(displayObject); } + /* else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); - + // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } - - this.insertAfter(displayObject, previousSprite); - - // insert and SPLIT! + */ -} + this.insertAfter(displayObject, previousSprite); + + // insert and SPLIT! +}; /** * Inserts a displayObject into the linked list @@ -680,36 +681,38 @@ */ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { + var index; + if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; - + if(previousBatch) { // so this object is in a batch! - + // is it not? need to split the batch - if(previousBatch.tail == displayObject) + if(previousBatch.tail === displayObject) { - // is it tail? insert in to batchs - var index = this.batchs.indexOf( previousBatch ); + // is it tail? insert in to batchs + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // - + // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); - + // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } @@ -720,10 +723,10 @@ } else { - var index = this.batchs.indexOf( displayObject ); + index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } -} +}; /** * Removes a displayObject from the linked list @@ -736,26 +739,26 @@ { // loop through children.. // display object // - + // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. - * + * */ var batchToRemove; - + if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering - + batch.remove(displayObject); - - if(batch.size==0) + + if(batch.size === 0) { batchToRemove = batch; } @@ -764,44 +767,44 @@ { batchToRemove = displayObject; } - + /* * Looks like there is somthing that needs removing! */ - if(batchToRemove) + if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); - if(index == -1)return;// this means it was added then removed before rendered - + if(index === -1)return;// this means it was added then removed before rendered + // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? - if(index == 0 || index == this.batchs.length-1) + if(index === 0 || index === this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); - + return; } - + if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { - if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) + if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); - + if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } - + this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } -} +}; /** @@ -816,26 +819,26 @@ var gl = this.gl; // make the texture tilable.. - + sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); - + sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); - + sprite.colors = new Float32Array([1,1,1,1]); - - sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); - + + sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]); + sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); @@ -847,7 +850,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); - + // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) @@ -861,7 +864,7 @@ { sprite.texture.baseTexture._powerOf2 = true; } -} +}; /** * Renders a Strip @@ -879,18 +882,16 @@ var shader = PIXI.stripShader; - var program = shader.program; - var m = PIXI.mat3.clone(strip.worldTransform); - + PIXI.mat3.transpose(m); - + // console.log(projection) - // set the matrix transform for the + // set the matrix transform for the gl.uniformMatrix3fv(shader.translationMatrix, false, m); gl.uniform2f(shader.projectionVector, projection.x, projection.y); gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(shader.alpha, strip.worldAlpha); /* @@ -903,24 +904,24 @@ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ - + //console.log("!!") if(!strip.dirty) - { + { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } @@ -928,32 +929,32 @@ { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); // console.log(strip.texture.baseTexture._glTexture) gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); - + } - + gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); - + PIXI.deactivateStripShader(); //gl.useProgram(PIXI.currentProgram); -} +}; /** * Renders a TilingSprite @@ -967,35 +968,32 @@ { var gl = this.gl; - - var shaderProgram = PIXI.shaderProgram; - var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; - + var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; - + sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; - + sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; - + sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs); + this.renderStrip(sprite, projectionMatrix); -} +}; /** * Initializes a strip to be rendered @@ -1008,13 +1006,12 @@ { // build the strip! var gl = this.gl; - var shaderProgram = this.shaderProgram; - + strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); @@ -1024,8 +1021,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); -} - +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderGroup.js b/src/pixi/renderers/webgl/WebGLRenderGroup.js index 990d9be..47d8b96 100644 --- a/src/pixi/renderers/webgl/WebGLRenderGroup.js +++ b/src/pixi/renderers/webgl/WebGLRenderGroup.js @@ -18,16 +18,16 @@ PIXI.WebGLRenderGroup = function(gl, transparent) { this.gl = gl; - this.root; - - this.backgroundColor; - this.transparent = transparent == undefined ? true : transparent; - + this.root = null; + + this.backgroundColor = undefined; + this.transparent = transparent === undefined ? true : transparent; + this.batchs = []; this.toRemove = []; - console.log(this.transparent) + //console.log(this.transparent); this.filterManager = new PIXI.WebGLFilterManager(this.transparent); -} +}; // constructor PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup; @@ -37,22 +37,22 @@ * * @method setRenderable * @param displayObject {DisplayObject} - * @private + * @private */ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); - + displayObject.worldVisible = displayObject.visible; - + // soooooo // // to check if any batchs exist already?? - + // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); -} +}; /** * Renders the stage to its webgl view @@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer) { PIXI.WebGLRenderer.updateTextures(); - + var gl = this.gl; gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y); this.filterManager.begin(projection, buffer); - + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // will render all the elements in the group var renderable; - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - + renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); continue; } - + // render special this.renderSpecial(renderable, projection); } - -} +}; /** * Renders a specific displayObject @@ -109,13 +108,16 @@ // to do! // render part of the scene... - + var startIndex; var startBatchIndex; - + var endIndex; var endBatchIndex; - + var endBatch; + + var head; + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -130,25 +132,24 @@ } var startBatch = nextRenderable.batch; //console.log(nextRenderable); - + //console.log(renderable) if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; - - var head = startBatch.head; - var next = head; - + + head = startBatch.head; + // ok now we have the batch.. need to find the start index! - if(head == nextRenderable) + if(head === nextRenderable) { startIndex = 0; } else { startIndex = 1; - - while(head.__next != nextRenderable) + + while(head.__next !== nextRenderable) { startIndex++; head = head.__next; @@ -159,7 +160,7 @@ { startBatch = nextRenderable; } - + // Get the LAST renderable object var lastRenderable = displayObject.last; while(lastRenderable._iPrev) @@ -167,22 +168,22 @@ if(lastRenderable.renderable && lastRenderable.__renderGroup)break; lastRenderable = lastRenderable._iNext; } - + if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; - - var head = endBatch.head; - - if(head == lastRenderable) + + head = endBatch.head; + + if(head === lastRenderable) { endIndex = 0; } else { endIndex = 1; - - while(head.__next != lastRenderable) + + while(head.__next !== lastRenderable) { endIndex++; head = head.__next; @@ -193,11 +194,11 @@ { endBatch = lastRenderable; } - + //console.log(endBatch); // TODO - need to fold this up a bit! - - if(startBatch == endBatch) + + if(startBatch === endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { @@ -209,11 +210,11 @@ } return; } - + // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); - + // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { @@ -223,12 +224,13 @@ { this.renderSpecial(startBatch, projection); } - + // DO the middle batchs.. - for (var i=startBatchIndex+1; i < endBatchIndex; i++) + var renderable; + for (var i = startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; - + if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); @@ -238,7 +240,7 @@ this.renderSpecial(renderable, projection); } } - + // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { @@ -248,7 +250,7 @@ { this.renderSpecial(endBatch, projection); } -} +}; /** * Renders a specific renderable @@ -260,8 +262,8 @@ */ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) { - - var worldVisible = renderable.vcount === PIXI.visibleCount + + var worldVisible = renderable.vcount === PIXI.visibleCount; if(renderable instanceof PIXI.TilingSprite) @@ -284,9 +286,8 @@ { this.handleFilterBlock(renderable, projection); } -} +}; -flip = false; var maskStack = []; var maskPosition = 0; @@ -298,30 +299,30 @@ * for now only masks are supported.. */ var gl = PIXI.gl; - + if(filterBlock.open) { if(filterBlock.data instanceof Array) { this.filterManager.pushFilter(filterBlock); // ok so.. - + } else - { + { maskPosition++; - maskStack.push(filterBlock) - + maskStack.push(filterBlock); + gl.enable(gl.STENCIL_TEST); - + gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - + PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -335,27 +336,26 @@ } else { - var maskData = maskStack.pop(filterBlock) - + var maskData = maskStack.pop(filterBlock); if(maskData) { gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); PIXI.WebGLGraphics.renderGraphics(maskData.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - }; + } gl.disable(gl.STENCIL_TEST); } } -} +}; /** * Updates a webgl texture @@ -366,23 +366,23 @@ */ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { - + // TODO definitely can optimse this function.. - + this.removeObject(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; - while(previousRenderable != this.root) + while(previousRenderable !== this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -395,9 +395,9 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - + this.insertObject(displayObject, previousRenderable, nextRenderable); -} +}; /** * Adds filter blocks @@ -417,13 +417,13 @@ * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -431,13 +431,13 @@ * scene graph */ var previousRenderable2 = end; - while(previousRenderable2 != this.root.first) + while(previousRenderable2 !== this.root.first) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); -} +}; /** * Remove filter blocks @@ -451,7 +451,7 @@ { this.removeObject(start); this.removeObject(end); -} +}; /** * Adds a display object and children to the webgl context @@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ - + var previousRenderable = displayObject.first; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -489,26 +489,27 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - - // one the display object hits this. we can break the loop - + + // one the display object hits this. we can break the loop + var tempObject = displayObject.first; var testObject = displayObject.last._iNext; - do + + do { tempObject.__renderGroup = this; - + if(tempObject.renderable) { - + this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } - + tempObject = tempObject._iNext; } - while(tempObject != testObject) -} + while(tempObject !== testObject); +}; /** * Removes a display object and children to the webgl context @@ -519,18 +520,16 @@ */ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { - if(displayObject.__renderGroup != this)return; - -// var displayObject = displayObject.first; - var lastObject = displayObject.last; - do + if(displayObject.__renderGroup !== this) return; + + do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } - while(displayObject) -} + while(displayObject); +}; /** * Inserts a displayObject into the linked list @@ -546,22 +545,23 @@ // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; - + var index, batch; + /* * so now we have the next renderable and the previous renderable - * + * */ if(displayObject instanceof PIXI.Sprite) { - var previousBatch - var nextBatch - + var previousBatch; + var nextBatch; + if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { - if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; @@ -573,40 +573,40 @@ // TODO reword! previousBatch = previousSprite; } - + if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; - + //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { - if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { - if(nextBatch == previousBatch) + if(nextBatch === previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var batch = PIXI.WebGLRenderer.getBatch(); + batch = PIXI.WebGLRenderer.getBatch(); - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); - + return; } } @@ -615,39 +615,39 @@ else { // TODO re-word! - + nextBatch = nextSprite; } } - + /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ - - var batch = PIXI.WebGLRenderer.getBatch(); + + batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); - if(previousBatch) // if this is invalid it means + if(previousBatch) // if this is invalid it means { - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } - + return; } else if(displayObject instanceof PIXI.TilingSprite) { - + // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); - + } else if(displayObject instanceof PIXI.Strip) { @@ -655,20 +655,21 @@ this.initStrip(displayObject); // this.batchs.push(displayObject); } + /* else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); - + // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } - - this.insertAfter(displayObject, previousSprite); - - // insert and SPLIT! + */ -} + this.insertAfter(displayObject, previousSprite); + + // insert and SPLIT! +}; /** * Inserts a displayObject into the linked list @@ -680,36 +681,38 @@ */ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { + var index; + if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; - + if(previousBatch) { // so this object is in a batch! - + // is it not? need to split the batch - if(previousBatch.tail == displayObject) + if(previousBatch.tail === displayObject) { - // is it tail? insert in to batchs - var index = this.batchs.indexOf( previousBatch ); + // is it tail? insert in to batchs + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // - + // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); - + // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } @@ -720,10 +723,10 @@ } else { - var index = this.batchs.indexOf( displayObject ); + index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } -} +}; /** * Removes a displayObject from the linked list @@ -736,26 +739,26 @@ { // loop through children.. // display object // - + // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. - * + * */ var batchToRemove; - + if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering - + batch.remove(displayObject); - - if(batch.size==0) + + if(batch.size === 0) { batchToRemove = batch; } @@ -764,44 +767,44 @@ { batchToRemove = displayObject; } - + /* * Looks like there is somthing that needs removing! */ - if(batchToRemove) + if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); - if(index == -1)return;// this means it was added then removed before rendered - + if(index === -1)return;// this means it was added then removed before rendered + // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? - if(index == 0 || index == this.batchs.length-1) + if(index === 0 || index === this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); - + return; } - + if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { - if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) + if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); - + if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } - + this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } -} +}; /** @@ -816,26 +819,26 @@ var gl = this.gl; // make the texture tilable.. - + sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); - + sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); - + sprite.colors = new Float32Array([1,1,1,1]); - - sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); - + + sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]); + sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); @@ -847,7 +850,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); - + // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) @@ -861,7 +864,7 @@ { sprite.texture.baseTexture._powerOf2 = true; } -} +}; /** * Renders a Strip @@ -879,18 +882,16 @@ var shader = PIXI.stripShader; - var program = shader.program; - var m = PIXI.mat3.clone(strip.worldTransform); - + PIXI.mat3.transpose(m); - + // console.log(projection) - // set the matrix transform for the + // set the matrix transform for the gl.uniformMatrix3fv(shader.translationMatrix, false, m); gl.uniform2f(shader.projectionVector, projection.x, projection.y); gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(shader.alpha, strip.worldAlpha); /* @@ -903,24 +904,24 @@ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ - + //console.log("!!") if(!strip.dirty) - { + { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } @@ -928,32 +929,32 @@ { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); // console.log(strip.texture.baseTexture._glTexture) gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); - + } - + gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); - + PIXI.deactivateStripShader(); //gl.useProgram(PIXI.currentProgram); -} +}; /** * Renders a TilingSprite @@ -967,35 +968,32 @@ { var gl = this.gl; - - var shaderProgram = PIXI.shaderProgram; - var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; - + var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; - + sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; - + sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; - + sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs); + this.renderStrip(sprite, projectionMatrix); -} +}; /** * Initializes a strip to be rendered @@ -1008,13 +1006,12 @@ { // build the strip! var gl = this.gl; - var shaderProgram = this.shaderProgram; - + strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); @@ -1024,8 +1021,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); -} - +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 9b5e703..1acec35 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -6,7 +6,7 @@ // an instance of the gl context.. // only one at the moment :/ -PIXI.gl; +PIXI.gl = null; /** * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer @@ -21,7 +21,7 @@ * @param view {Canvas} the canvas to use as a view, optional * @param transparent=false {Boolean} the transparency of the render view, default false * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * + * */ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) { @@ -32,14 +32,14 @@ this.width = width || 800; this.height = height || 600; - this.view = view || document.createElement( 'canvas' ); + this.view = view || document.createElement( 'canvas' ); this.view.width = this.width; this.view.height = this.height; - // deal with losing context.. + // deal with losing context.. var scope = this; - this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) - this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) + this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false); + this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false); this.batchs = []; @@ -48,30 +48,30 @@ antialias:!!antialias, // SPEED UP?? premultipliedAlpha:false, stencil:true - } + }; //try 'experimental-webgl' try { - PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options); + PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options); } catch (e) { //try 'webgl' try { - PIXI.gl = this.gl = this.view.getContext("webgl", options); - } catch (e) { + PIXI.gl = this.gl = this.view.getContext('webgl', options); + } catch (e2) { // fail, not able to get a context - throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); + throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); } } PIXI.initDefaultShaders(); - - + + // PIXI.activateDefaultShader(); var gl = this.gl; - + gl.useProgram(PIXI.defaultShader.program); @@ -82,7 +82,7 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); - gl.colorMask(true, true, true, this.transparent); + gl.colorMask(true, true, true, this.transparent); PIXI.projection = new PIXI.Point(400, 300); PIXI.offset = new PIXI.Point(0, 0); @@ -96,7 +96,7 @@ this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent); // this.stageRenderGroup. = this.transparent -} +}; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; @@ -107,11 +107,11 @@ * @static * @method getBatch * @return {WebGLBatch} - * @private + * @private */ PIXI.WebGLRenderer.getBatch = function() { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); } @@ -119,7 +119,7 @@ { return PIXI._batchs.pop(); } -} +}; /** * Puts a batch back into the pool @@ -131,9 +131,9 @@ */ PIXI.WebGLRenderer.returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * Renders the stage to its webGL view @@ -144,8 +144,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage) { if(this.contextLost)return; - - + + // if rendering a new stage clear the batchs.. if(this.__stage !== stage) { @@ -155,33 +155,33 @@ this.stageRenderGroup.setRenderable(stage); } - // update any textures + // update any textures PIXI.WebGLRenderer.updateTextures(); - - // update the scene graph + + // update the scene graph PIXI.visibleCount++; stage.updateTransform(); - + var gl = this.gl; - + // -- Does this need to be set every frame? -- // - gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - + gl.colorMask(true, true, true, this.transparent); + gl.viewport(0, 0, this.width, this.height); + gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); + + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); // HACK TO TEST - + this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; - + PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + this.stageRenderGroup.render(PIXI.projection); - + // interaction // run interaction! if(stage.interactive) @@ -193,18 +193,18 @@ stage.interactionManager.setTarget(this); } } - + // after rendering lets confirm all frames that have been uodated.. if(PIXI.Texture.frameUpdates.length > 0) { - for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) + for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) { PIXI.Texture.frameUpdates[i].updateFrame = false; - }; - + } + PIXI.Texture.frameUpdates = []; } -} +}; /** * Updates the textures loaded into this webgl renderer @@ -215,12 +215,18 @@ */ PIXI.WebGLRenderer.updateTextures = function() { + var i = 0; + //TODO break this out into a texture manager... - for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); - for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + for (i = 0; i < PIXI.texturesToUpdate.length; i++) + PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); + + for (i = 0; i < PIXI.texturesToDestroy.length; i++) + PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; -} +}; /** * Updates a loaded webgl texture @@ -234,7 +240,7 @@ { //TODO break this out into a texture manager... var gl = PIXI.gl; - + if(!texture._glTexture) { texture._glTexture = gl.createTexture(); @@ -264,7 +270,7 @@ gl.bindTexture(gl.TEXTURE_2D, null); } -} +}; /** * Destroys a loaded webgl texture @@ -283,7 +289,7 @@ texture._glTexture = gl.createTexture(); gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture); } -} +}; /** * resizes the webGL view to the specified width and height @@ -300,13 +306,13 @@ this.view.width = width; this.view.height = height; - this.gl.viewport(0, 0, this.width, this.height); + this.gl.viewport(0, 0, this.width, this.height); //var projectionMatrix = this.projectionMatrix; PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + //PIXI.size.x = this.width/2; //PIXI.size.y = -this.height/2; @@ -314,7 +320,7 @@ // projectionMatrix[5] = -2/this.height; // projectionMatrix[12] = -1; // projectionMatrix[13] = 1; -} +}; /** * Handles a lost webgl context @@ -327,7 +333,7 @@ { event.preventDefault(); this.contextLost = true; -} +}; /** * Handles a restored webgl context @@ -336,28 +342,28 @@ * @param event {Event} * @private */ -PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) +PIXI.WebGLRenderer.prototype.handleContextRestored = function() { - this.gl = this.view.getContext("experimental-webgl", { + this.gl = this.view.getContext('experimental-webgl', { alpha: true }); - this.initShaders(); + this.initShaders(); - for(var key in PIXI.TextureCache) + for(var key in PIXI.TextureCache) { - var texture = PIXI.TextureCache[key].baseTexture; - texture._glTexture = null; - PIXI.WebGLRenderer.updateTexture(texture); - }; + var texture = PIXI.TextureCache[key].baseTexture; + texture._glTexture = null; + PIXI.WebGLRenderer.updateTexture(texture); + } - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - this.batchs[i].restoreLostContext(this.gl)// + this.batchs[i].restoreLostContext(this.gl); this.batchs[i].dirty = true; - }; + } PIXI._restoreBatchs(this.gl); this.contextLost = false; -} +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderGroup.js b/src/pixi/renderers/webgl/WebGLRenderGroup.js index 990d9be..47d8b96 100644 --- a/src/pixi/renderers/webgl/WebGLRenderGroup.js +++ b/src/pixi/renderers/webgl/WebGLRenderGroup.js @@ -18,16 +18,16 @@ PIXI.WebGLRenderGroup = function(gl, transparent) { this.gl = gl; - this.root; - - this.backgroundColor; - this.transparent = transparent == undefined ? true : transparent; - + this.root = null; + + this.backgroundColor = undefined; + this.transparent = transparent === undefined ? true : transparent; + this.batchs = []; this.toRemove = []; - console.log(this.transparent) + //console.log(this.transparent); this.filterManager = new PIXI.WebGLFilterManager(this.transparent); -} +}; // constructor PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup; @@ -37,22 +37,22 @@ * * @method setRenderable * @param displayObject {DisplayObject} - * @private + * @private */ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); - + displayObject.worldVisible = displayObject.visible; - + // soooooo // // to check if any batchs exist already?? - + // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); -} +}; /** * Renders the stage to its webgl view @@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer) { PIXI.WebGLRenderer.updateTextures(); - + var gl = this.gl; gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y); this.filterManager.begin(projection, buffer); - + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // will render all the elements in the group var renderable; - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - + renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); continue; } - + // render special this.renderSpecial(renderable, projection); } - -} +}; /** * Renders a specific displayObject @@ -109,13 +108,16 @@ // to do! // render part of the scene... - + var startIndex; var startBatchIndex; - + var endIndex; var endBatchIndex; - + var endBatch; + + var head; + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -130,25 +132,24 @@ } var startBatch = nextRenderable.batch; //console.log(nextRenderable); - + //console.log(renderable) if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; - - var head = startBatch.head; - var next = head; - + + head = startBatch.head; + // ok now we have the batch.. need to find the start index! - if(head == nextRenderable) + if(head === nextRenderable) { startIndex = 0; } else { startIndex = 1; - - while(head.__next != nextRenderable) + + while(head.__next !== nextRenderable) { startIndex++; head = head.__next; @@ -159,7 +160,7 @@ { startBatch = nextRenderable; } - + // Get the LAST renderable object var lastRenderable = displayObject.last; while(lastRenderable._iPrev) @@ -167,22 +168,22 @@ if(lastRenderable.renderable && lastRenderable.__renderGroup)break; lastRenderable = lastRenderable._iNext; } - + if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; - - var head = endBatch.head; - - if(head == lastRenderable) + + head = endBatch.head; + + if(head === lastRenderable) { endIndex = 0; } else { endIndex = 1; - - while(head.__next != lastRenderable) + + while(head.__next !== lastRenderable) { endIndex++; head = head.__next; @@ -193,11 +194,11 @@ { endBatch = lastRenderable; } - + //console.log(endBatch); // TODO - need to fold this up a bit! - - if(startBatch == endBatch) + + if(startBatch === endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { @@ -209,11 +210,11 @@ } return; } - + // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); - + // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { @@ -223,12 +224,13 @@ { this.renderSpecial(startBatch, projection); } - + // DO the middle batchs.. - for (var i=startBatchIndex+1; i < endBatchIndex; i++) + var renderable; + for (var i = startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; - + if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); @@ -238,7 +240,7 @@ this.renderSpecial(renderable, projection); } } - + // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { @@ -248,7 +250,7 @@ { this.renderSpecial(endBatch, projection); } -} +}; /** * Renders a specific renderable @@ -260,8 +262,8 @@ */ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) { - - var worldVisible = renderable.vcount === PIXI.visibleCount + + var worldVisible = renderable.vcount === PIXI.visibleCount; if(renderable instanceof PIXI.TilingSprite) @@ -284,9 +286,8 @@ { this.handleFilterBlock(renderable, projection); } -} +}; -flip = false; var maskStack = []; var maskPosition = 0; @@ -298,30 +299,30 @@ * for now only masks are supported.. */ var gl = PIXI.gl; - + if(filterBlock.open) { if(filterBlock.data instanceof Array) { this.filterManager.pushFilter(filterBlock); // ok so.. - + } else - { + { maskPosition++; - maskStack.push(filterBlock) - + maskStack.push(filterBlock); + gl.enable(gl.STENCIL_TEST); - + gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - + PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -335,27 +336,26 @@ } else { - var maskData = maskStack.pop(filterBlock) - + var maskData = maskStack.pop(filterBlock); if(maskData) { gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); PIXI.WebGLGraphics.renderGraphics(maskData.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - }; + } gl.disable(gl.STENCIL_TEST); } } -} +}; /** * Updates a webgl texture @@ -366,23 +366,23 @@ */ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { - + // TODO definitely can optimse this function.. - + this.removeObject(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; - while(previousRenderable != this.root) + while(previousRenderable !== this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -395,9 +395,9 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - + this.insertObject(displayObject, previousRenderable, nextRenderable); -} +}; /** * Adds filter blocks @@ -417,13 +417,13 @@ * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -431,13 +431,13 @@ * scene graph */ var previousRenderable2 = end; - while(previousRenderable2 != this.root.first) + while(previousRenderable2 !== this.root.first) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); -} +}; /** * Remove filter blocks @@ -451,7 +451,7 @@ { this.removeObject(start); this.removeObject(end); -} +}; /** * Adds a display object and children to the webgl context @@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ - + var previousRenderable = displayObject.first; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -489,26 +489,27 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - - // one the display object hits this. we can break the loop - + + // one the display object hits this. we can break the loop + var tempObject = displayObject.first; var testObject = displayObject.last._iNext; - do + + do { tempObject.__renderGroup = this; - + if(tempObject.renderable) { - + this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } - + tempObject = tempObject._iNext; } - while(tempObject != testObject) -} + while(tempObject !== testObject); +}; /** * Removes a display object and children to the webgl context @@ -519,18 +520,16 @@ */ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { - if(displayObject.__renderGroup != this)return; - -// var displayObject = displayObject.first; - var lastObject = displayObject.last; - do + if(displayObject.__renderGroup !== this) return; + + do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } - while(displayObject) -} + while(displayObject); +}; /** * Inserts a displayObject into the linked list @@ -546,22 +545,23 @@ // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; - + var index, batch; + /* * so now we have the next renderable and the previous renderable - * + * */ if(displayObject instanceof PIXI.Sprite) { - var previousBatch - var nextBatch - + var previousBatch; + var nextBatch; + if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { - if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; @@ -573,40 +573,40 @@ // TODO reword! previousBatch = previousSprite; } - + if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; - + //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { - if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { - if(nextBatch == previousBatch) + if(nextBatch === previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var batch = PIXI.WebGLRenderer.getBatch(); + batch = PIXI.WebGLRenderer.getBatch(); - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); - + return; } } @@ -615,39 +615,39 @@ else { // TODO re-word! - + nextBatch = nextSprite; } } - + /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ - - var batch = PIXI.WebGLRenderer.getBatch(); + + batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); - if(previousBatch) // if this is invalid it means + if(previousBatch) // if this is invalid it means { - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } - + return; } else if(displayObject instanceof PIXI.TilingSprite) { - + // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); - + } else if(displayObject instanceof PIXI.Strip) { @@ -655,20 +655,21 @@ this.initStrip(displayObject); // this.batchs.push(displayObject); } + /* else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); - + // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } - - this.insertAfter(displayObject, previousSprite); - - // insert and SPLIT! + */ -} + this.insertAfter(displayObject, previousSprite); + + // insert and SPLIT! +}; /** * Inserts a displayObject into the linked list @@ -680,36 +681,38 @@ */ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { + var index; + if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; - + if(previousBatch) { // so this object is in a batch! - + // is it not? need to split the batch - if(previousBatch.tail == displayObject) + if(previousBatch.tail === displayObject) { - // is it tail? insert in to batchs - var index = this.batchs.indexOf( previousBatch ); + // is it tail? insert in to batchs + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // - + // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); - + // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } @@ -720,10 +723,10 @@ } else { - var index = this.batchs.indexOf( displayObject ); + index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } -} +}; /** * Removes a displayObject from the linked list @@ -736,26 +739,26 @@ { // loop through children.. // display object // - + // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. - * + * */ var batchToRemove; - + if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering - + batch.remove(displayObject); - - if(batch.size==0) + + if(batch.size === 0) { batchToRemove = batch; } @@ -764,44 +767,44 @@ { batchToRemove = displayObject; } - + /* * Looks like there is somthing that needs removing! */ - if(batchToRemove) + if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); - if(index == -1)return;// this means it was added then removed before rendered - + if(index === -1)return;// this means it was added then removed before rendered + // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? - if(index == 0 || index == this.batchs.length-1) + if(index === 0 || index === this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); - + return; } - + if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { - if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) + if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); - + if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } - + this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } -} +}; /** @@ -816,26 +819,26 @@ var gl = this.gl; // make the texture tilable.. - + sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); - + sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); - + sprite.colors = new Float32Array([1,1,1,1]); - - sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); - + + sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]); + sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); @@ -847,7 +850,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); - + // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) @@ -861,7 +864,7 @@ { sprite.texture.baseTexture._powerOf2 = true; } -} +}; /** * Renders a Strip @@ -879,18 +882,16 @@ var shader = PIXI.stripShader; - var program = shader.program; - var m = PIXI.mat3.clone(strip.worldTransform); - + PIXI.mat3.transpose(m); - + // console.log(projection) - // set the matrix transform for the + // set the matrix transform for the gl.uniformMatrix3fv(shader.translationMatrix, false, m); gl.uniform2f(shader.projectionVector, projection.x, projection.y); gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(shader.alpha, strip.worldAlpha); /* @@ -903,24 +904,24 @@ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ - + //console.log("!!") if(!strip.dirty) - { + { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } @@ -928,32 +929,32 @@ { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); // console.log(strip.texture.baseTexture._glTexture) gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); - + } - + gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); - + PIXI.deactivateStripShader(); //gl.useProgram(PIXI.currentProgram); -} +}; /** * Renders a TilingSprite @@ -967,35 +968,32 @@ { var gl = this.gl; - - var shaderProgram = PIXI.shaderProgram; - var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; - + var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; - + sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; - + sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; - + sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs); + this.renderStrip(sprite, projectionMatrix); -} +}; /** * Initializes a strip to be rendered @@ -1008,13 +1006,12 @@ { // build the strip! var gl = this.gl; - var shaderProgram = this.shaderProgram; - + strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); @@ -1024,8 +1021,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); -} - +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 9b5e703..1acec35 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -6,7 +6,7 @@ // an instance of the gl context.. // only one at the moment :/ -PIXI.gl; +PIXI.gl = null; /** * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer @@ -21,7 +21,7 @@ * @param view {Canvas} the canvas to use as a view, optional * @param transparent=false {Boolean} the transparency of the render view, default false * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * + * */ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) { @@ -32,14 +32,14 @@ this.width = width || 800; this.height = height || 600; - this.view = view || document.createElement( 'canvas' ); + this.view = view || document.createElement( 'canvas' ); this.view.width = this.width; this.view.height = this.height; - // deal with losing context.. + // deal with losing context.. var scope = this; - this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) - this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) + this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false); + this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false); this.batchs = []; @@ -48,30 +48,30 @@ antialias:!!antialias, // SPEED UP?? premultipliedAlpha:false, stencil:true - } + }; //try 'experimental-webgl' try { - PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options); + PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options); } catch (e) { //try 'webgl' try { - PIXI.gl = this.gl = this.view.getContext("webgl", options); - } catch (e) { + PIXI.gl = this.gl = this.view.getContext('webgl', options); + } catch (e2) { // fail, not able to get a context - throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); + throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); } } PIXI.initDefaultShaders(); - - + + // PIXI.activateDefaultShader(); var gl = this.gl; - + gl.useProgram(PIXI.defaultShader.program); @@ -82,7 +82,7 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); - gl.colorMask(true, true, true, this.transparent); + gl.colorMask(true, true, true, this.transparent); PIXI.projection = new PIXI.Point(400, 300); PIXI.offset = new PIXI.Point(0, 0); @@ -96,7 +96,7 @@ this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent); // this.stageRenderGroup. = this.transparent -} +}; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; @@ -107,11 +107,11 @@ * @static * @method getBatch * @return {WebGLBatch} - * @private + * @private */ PIXI.WebGLRenderer.getBatch = function() { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); } @@ -119,7 +119,7 @@ { return PIXI._batchs.pop(); } -} +}; /** * Puts a batch back into the pool @@ -131,9 +131,9 @@ */ PIXI.WebGLRenderer.returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * Renders the stage to its webGL view @@ -144,8 +144,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage) { if(this.contextLost)return; - - + + // if rendering a new stage clear the batchs.. if(this.__stage !== stage) { @@ -155,33 +155,33 @@ this.stageRenderGroup.setRenderable(stage); } - // update any textures + // update any textures PIXI.WebGLRenderer.updateTextures(); - - // update the scene graph + + // update the scene graph PIXI.visibleCount++; stage.updateTransform(); - + var gl = this.gl; - + // -- Does this need to be set every frame? -- // - gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - + gl.colorMask(true, true, true, this.transparent); + gl.viewport(0, 0, this.width, this.height); + gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); + + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); // HACK TO TEST - + this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; - + PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + this.stageRenderGroup.render(PIXI.projection); - + // interaction // run interaction! if(stage.interactive) @@ -193,18 +193,18 @@ stage.interactionManager.setTarget(this); } } - + // after rendering lets confirm all frames that have been uodated.. if(PIXI.Texture.frameUpdates.length > 0) { - for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) + for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) { PIXI.Texture.frameUpdates[i].updateFrame = false; - }; - + } + PIXI.Texture.frameUpdates = []; } -} +}; /** * Updates the textures loaded into this webgl renderer @@ -215,12 +215,18 @@ */ PIXI.WebGLRenderer.updateTextures = function() { + var i = 0; + //TODO break this out into a texture manager... - for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); - for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + for (i = 0; i < PIXI.texturesToUpdate.length; i++) + PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); + + for (i = 0; i < PIXI.texturesToDestroy.length; i++) + PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; -} +}; /** * Updates a loaded webgl texture @@ -234,7 +240,7 @@ { //TODO break this out into a texture manager... var gl = PIXI.gl; - + if(!texture._glTexture) { texture._glTexture = gl.createTexture(); @@ -264,7 +270,7 @@ gl.bindTexture(gl.TEXTURE_2D, null); } -} +}; /** * Destroys a loaded webgl texture @@ -283,7 +289,7 @@ texture._glTexture = gl.createTexture(); gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture); } -} +}; /** * resizes the webGL view to the specified width and height @@ -300,13 +306,13 @@ this.view.width = width; this.view.height = height; - this.gl.viewport(0, 0, this.width, this.height); + this.gl.viewport(0, 0, this.width, this.height); //var projectionMatrix = this.projectionMatrix; PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + //PIXI.size.x = this.width/2; //PIXI.size.y = -this.height/2; @@ -314,7 +320,7 @@ // projectionMatrix[5] = -2/this.height; // projectionMatrix[12] = -1; // projectionMatrix[13] = 1; -} +}; /** * Handles a lost webgl context @@ -327,7 +333,7 @@ { event.preventDefault(); this.contextLost = true; -} +}; /** * Handles a restored webgl context @@ -336,28 +342,28 @@ * @param event {Event} * @private */ -PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) +PIXI.WebGLRenderer.prototype.handleContextRestored = function() { - this.gl = this.view.getContext("experimental-webgl", { + this.gl = this.view.getContext('experimental-webgl', { alpha: true }); - this.initShaders(); + this.initShaders(); - for(var key in PIXI.TextureCache) + for(var key in PIXI.TextureCache) { - var texture = PIXI.TextureCache[key].baseTexture; - texture._glTexture = null; - PIXI.WebGLRenderer.updateTexture(texture); - }; + var texture = PIXI.TextureCache[key].baseTexture; + texture._glTexture = null; + PIXI.WebGLRenderer.updateTexture(texture); + } - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - this.batchs[i].restoreLostContext(this.gl)// + this.batchs[i].restoreLostContext(this.gl); this.batchs[i].dirty = true; - }; + } PIXI._restoreBatchs(this.gl); this.contextLost = false; -} +}; diff --git a/src/pixi/renderers/webgl/WebGLShaders.js b/src/pixi/renderers/webgl/WebGLShaders.js index 016d37c..b6b66b7 100644 --- a/src/pixi/renderers/webgl/WebGLShaders.js +++ b/src/pixi/renderers/webgl/WebGLShaders.js @@ -2,8 +2,7 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - -PIXI.initDefaultShaders = function() +PIXI.initDefaultShaders = function() { PIXI.primitiveShader = new PIXI.PrimitiveShader(); PIXI.primitiveShader.init(); @@ -14,53 +13,51 @@ PIXI.defaultShader = new PIXI.PixiShader(); PIXI.defaultShader.init(); - var gl = PIXI.gl; + var gl = PIXI.gl; var shaderProgram = PIXI.defaultShader.program; - gl.useProgram(shaderProgram); - + gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.activatePrimitiveShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.primitiveShader.program); - + gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute); -} +}; PIXI.deactivatePrimitiveShader = function() { var gl = PIXI.gl; gl.useProgram(PIXI.defaultShader.program); - + gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); - -} +}; PIXI.activateStripShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.stripShader.program); // gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.deactivateStripShader = function() { @@ -68,7 +65,7 @@ gl.useProgram(PIXI.defaultShader.program); //gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; /* @@ -78,12 +75,12 @@ PIXI.CompileVertexShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); -} +}; PIXI.CompileFragmentShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); -} +}; PIXI._CompileShader = function(gl, shaderSrc, shaderType) { @@ -93,29 +90,28 @@ gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - console.log(gl.getShaderInfoLog(shader)); + window.console.log(gl.getShaderInfoLog(shader)); return null; } return shader; -} - +}; PIXI.compileProgram = function(vertexSrc, fragmentSrc) { var gl = PIXI.gl; var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); - - var shaderProgram = gl.createProgram(); - - gl.attachShader(shaderProgram, vertexShader); - gl.attachShader(shaderProgram, fragmentShader); - gl.linkProgram(shaderProgram); - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - console.log("Could not initialise shaders"); - } + var shaderProgram = gl.createProgram(); + + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + window.console.log("Could not initialise shaders"); + } return shaderProgram; -} +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderGroup.js b/src/pixi/renderers/webgl/WebGLRenderGroup.js index 990d9be..47d8b96 100644 --- a/src/pixi/renderers/webgl/WebGLRenderGroup.js +++ b/src/pixi/renderers/webgl/WebGLRenderGroup.js @@ -18,16 +18,16 @@ PIXI.WebGLRenderGroup = function(gl, transparent) { this.gl = gl; - this.root; - - this.backgroundColor; - this.transparent = transparent == undefined ? true : transparent; - + this.root = null; + + this.backgroundColor = undefined; + this.transparent = transparent === undefined ? true : transparent; + this.batchs = []; this.toRemove = []; - console.log(this.transparent) + //console.log(this.transparent); this.filterManager = new PIXI.WebGLFilterManager(this.transparent); -} +}; // constructor PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup; @@ -37,22 +37,22 @@ * * @method setRenderable * @param displayObject {DisplayObject} - * @private + * @private */ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); - + displayObject.worldVisible = displayObject.visible; - + // soooooo // // to check if any batchs exist already?? - + // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); -} +}; /** * Renders the stage to its webgl view @@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer) { PIXI.WebGLRenderer.updateTextures(); - + var gl = this.gl; gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y); this.filterManager.begin(projection, buffer); - + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // will render all the elements in the group var renderable; - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - + renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); continue; } - + // render special this.renderSpecial(renderable, projection); } - -} +}; /** * Renders a specific displayObject @@ -109,13 +108,16 @@ // to do! // render part of the scene... - + var startIndex; var startBatchIndex; - + var endIndex; var endBatchIndex; - + var endBatch; + + var head; + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -130,25 +132,24 @@ } var startBatch = nextRenderable.batch; //console.log(nextRenderable); - + //console.log(renderable) if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; - - var head = startBatch.head; - var next = head; - + + head = startBatch.head; + // ok now we have the batch.. need to find the start index! - if(head == nextRenderable) + if(head === nextRenderable) { startIndex = 0; } else { startIndex = 1; - - while(head.__next != nextRenderable) + + while(head.__next !== nextRenderable) { startIndex++; head = head.__next; @@ -159,7 +160,7 @@ { startBatch = nextRenderable; } - + // Get the LAST renderable object var lastRenderable = displayObject.last; while(lastRenderable._iPrev) @@ -167,22 +168,22 @@ if(lastRenderable.renderable && lastRenderable.__renderGroup)break; lastRenderable = lastRenderable._iNext; } - + if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; - - var head = endBatch.head; - - if(head == lastRenderable) + + head = endBatch.head; + + if(head === lastRenderable) { endIndex = 0; } else { endIndex = 1; - - while(head.__next != lastRenderable) + + while(head.__next !== lastRenderable) { endIndex++; head = head.__next; @@ -193,11 +194,11 @@ { endBatch = lastRenderable; } - + //console.log(endBatch); // TODO - need to fold this up a bit! - - if(startBatch == endBatch) + + if(startBatch === endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { @@ -209,11 +210,11 @@ } return; } - + // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); - + // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { @@ -223,12 +224,13 @@ { this.renderSpecial(startBatch, projection); } - + // DO the middle batchs.. - for (var i=startBatchIndex+1; i < endBatchIndex; i++) + var renderable; + for (var i = startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; - + if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); @@ -238,7 +240,7 @@ this.renderSpecial(renderable, projection); } } - + // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { @@ -248,7 +250,7 @@ { this.renderSpecial(endBatch, projection); } -} +}; /** * Renders a specific renderable @@ -260,8 +262,8 @@ */ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) { - - var worldVisible = renderable.vcount === PIXI.visibleCount + + var worldVisible = renderable.vcount === PIXI.visibleCount; if(renderable instanceof PIXI.TilingSprite) @@ -284,9 +286,8 @@ { this.handleFilterBlock(renderable, projection); } -} +}; -flip = false; var maskStack = []; var maskPosition = 0; @@ -298,30 +299,30 @@ * for now only masks are supported.. */ var gl = PIXI.gl; - + if(filterBlock.open) { if(filterBlock.data instanceof Array) { this.filterManager.pushFilter(filterBlock); // ok so.. - + } else - { + { maskPosition++; - maskStack.push(filterBlock) - + maskStack.push(filterBlock); + gl.enable(gl.STENCIL_TEST); - + gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - + PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -335,27 +336,26 @@ } else { - var maskData = maskStack.pop(filterBlock) - + var maskData = maskStack.pop(filterBlock); if(maskData) { gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); PIXI.WebGLGraphics.renderGraphics(maskData.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - }; + } gl.disable(gl.STENCIL_TEST); } } -} +}; /** * Updates a webgl texture @@ -366,23 +366,23 @@ */ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { - + // TODO definitely can optimse this function.. - + this.removeObject(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; - while(previousRenderable != this.root) + while(previousRenderable !== this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -395,9 +395,9 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - + this.insertObject(displayObject, previousRenderable, nextRenderable); -} +}; /** * Adds filter blocks @@ -417,13 +417,13 @@ * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -431,13 +431,13 @@ * scene graph */ var previousRenderable2 = end; - while(previousRenderable2 != this.root.first) + while(previousRenderable2 !== this.root.first) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); -} +}; /** * Remove filter blocks @@ -451,7 +451,7 @@ { this.removeObject(start); this.removeObject(end); -} +}; /** * Adds a display object and children to the webgl context @@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ - + var previousRenderable = displayObject.first; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -489,26 +489,27 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - - // one the display object hits this. we can break the loop - + + // one the display object hits this. we can break the loop + var tempObject = displayObject.first; var testObject = displayObject.last._iNext; - do + + do { tempObject.__renderGroup = this; - + if(tempObject.renderable) { - + this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } - + tempObject = tempObject._iNext; } - while(tempObject != testObject) -} + while(tempObject !== testObject); +}; /** * Removes a display object and children to the webgl context @@ -519,18 +520,16 @@ */ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { - if(displayObject.__renderGroup != this)return; - -// var displayObject = displayObject.first; - var lastObject = displayObject.last; - do + if(displayObject.__renderGroup !== this) return; + + do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } - while(displayObject) -} + while(displayObject); +}; /** * Inserts a displayObject into the linked list @@ -546,22 +545,23 @@ // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; - + var index, batch; + /* * so now we have the next renderable and the previous renderable - * + * */ if(displayObject instanceof PIXI.Sprite) { - var previousBatch - var nextBatch - + var previousBatch; + var nextBatch; + if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { - if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; @@ -573,40 +573,40 @@ // TODO reword! previousBatch = previousSprite; } - + if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; - + //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { - if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { - if(nextBatch == previousBatch) + if(nextBatch === previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var batch = PIXI.WebGLRenderer.getBatch(); + batch = PIXI.WebGLRenderer.getBatch(); - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); - + return; } } @@ -615,39 +615,39 @@ else { // TODO re-word! - + nextBatch = nextSprite; } } - + /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ - - var batch = PIXI.WebGLRenderer.getBatch(); + + batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); - if(previousBatch) // if this is invalid it means + if(previousBatch) // if this is invalid it means { - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } - + return; } else if(displayObject instanceof PIXI.TilingSprite) { - + // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); - + } else if(displayObject instanceof PIXI.Strip) { @@ -655,20 +655,21 @@ this.initStrip(displayObject); // this.batchs.push(displayObject); } + /* else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); - + // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } - - this.insertAfter(displayObject, previousSprite); - - // insert and SPLIT! + */ -} + this.insertAfter(displayObject, previousSprite); + + // insert and SPLIT! +}; /** * Inserts a displayObject into the linked list @@ -680,36 +681,38 @@ */ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { + var index; + if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; - + if(previousBatch) { // so this object is in a batch! - + // is it not? need to split the batch - if(previousBatch.tail == displayObject) + if(previousBatch.tail === displayObject) { - // is it tail? insert in to batchs - var index = this.batchs.indexOf( previousBatch ); + // is it tail? insert in to batchs + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // - + // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); - + // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } @@ -720,10 +723,10 @@ } else { - var index = this.batchs.indexOf( displayObject ); + index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } -} +}; /** * Removes a displayObject from the linked list @@ -736,26 +739,26 @@ { // loop through children.. // display object // - + // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. - * + * */ var batchToRemove; - + if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering - + batch.remove(displayObject); - - if(batch.size==0) + + if(batch.size === 0) { batchToRemove = batch; } @@ -764,44 +767,44 @@ { batchToRemove = displayObject; } - + /* * Looks like there is somthing that needs removing! */ - if(batchToRemove) + if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); - if(index == -1)return;// this means it was added then removed before rendered - + if(index === -1)return;// this means it was added then removed before rendered + // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? - if(index == 0 || index == this.batchs.length-1) + if(index === 0 || index === this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); - + return; } - + if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { - if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) + if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); - + if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } - + this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } -} +}; /** @@ -816,26 +819,26 @@ var gl = this.gl; // make the texture tilable.. - + sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); - + sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); - + sprite.colors = new Float32Array([1,1,1,1]); - - sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); - + + sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]); + sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); @@ -847,7 +850,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); - + // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) @@ -861,7 +864,7 @@ { sprite.texture.baseTexture._powerOf2 = true; } -} +}; /** * Renders a Strip @@ -879,18 +882,16 @@ var shader = PIXI.stripShader; - var program = shader.program; - var m = PIXI.mat3.clone(strip.worldTransform); - + PIXI.mat3.transpose(m); - + // console.log(projection) - // set the matrix transform for the + // set the matrix transform for the gl.uniformMatrix3fv(shader.translationMatrix, false, m); gl.uniform2f(shader.projectionVector, projection.x, projection.y); gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(shader.alpha, strip.worldAlpha); /* @@ -903,24 +904,24 @@ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ - + //console.log("!!") if(!strip.dirty) - { + { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } @@ -928,32 +929,32 @@ { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); // console.log(strip.texture.baseTexture._glTexture) gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); - + } - + gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); - + PIXI.deactivateStripShader(); //gl.useProgram(PIXI.currentProgram); -} +}; /** * Renders a TilingSprite @@ -967,35 +968,32 @@ { var gl = this.gl; - - var shaderProgram = PIXI.shaderProgram; - var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; - + var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; - + sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; - + sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; - + sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs); + this.renderStrip(sprite, projectionMatrix); -} +}; /** * Initializes a strip to be rendered @@ -1008,13 +1006,12 @@ { // build the strip! var gl = this.gl; - var shaderProgram = this.shaderProgram; - + strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); @@ -1024,8 +1021,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); -} - +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 9b5e703..1acec35 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -6,7 +6,7 @@ // an instance of the gl context.. // only one at the moment :/ -PIXI.gl; +PIXI.gl = null; /** * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer @@ -21,7 +21,7 @@ * @param view {Canvas} the canvas to use as a view, optional * @param transparent=false {Boolean} the transparency of the render view, default false * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * + * */ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) { @@ -32,14 +32,14 @@ this.width = width || 800; this.height = height || 600; - this.view = view || document.createElement( 'canvas' ); + this.view = view || document.createElement( 'canvas' ); this.view.width = this.width; this.view.height = this.height; - // deal with losing context.. + // deal with losing context.. var scope = this; - this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) - this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) + this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false); + this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false); this.batchs = []; @@ -48,30 +48,30 @@ antialias:!!antialias, // SPEED UP?? premultipliedAlpha:false, stencil:true - } + }; //try 'experimental-webgl' try { - PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options); + PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options); } catch (e) { //try 'webgl' try { - PIXI.gl = this.gl = this.view.getContext("webgl", options); - } catch (e) { + PIXI.gl = this.gl = this.view.getContext('webgl', options); + } catch (e2) { // fail, not able to get a context - throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); + throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); } } PIXI.initDefaultShaders(); - - + + // PIXI.activateDefaultShader(); var gl = this.gl; - + gl.useProgram(PIXI.defaultShader.program); @@ -82,7 +82,7 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); - gl.colorMask(true, true, true, this.transparent); + gl.colorMask(true, true, true, this.transparent); PIXI.projection = new PIXI.Point(400, 300); PIXI.offset = new PIXI.Point(0, 0); @@ -96,7 +96,7 @@ this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent); // this.stageRenderGroup. = this.transparent -} +}; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; @@ -107,11 +107,11 @@ * @static * @method getBatch * @return {WebGLBatch} - * @private + * @private */ PIXI.WebGLRenderer.getBatch = function() { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); } @@ -119,7 +119,7 @@ { return PIXI._batchs.pop(); } -} +}; /** * Puts a batch back into the pool @@ -131,9 +131,9 @@ */ PIXI.WebGLRenderer.returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * Renders the stage to its webGL view @@ -144,8 +144,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage) { if(this.contextLost)return; - - + + // if rendering a new stage clear the batchs.. if(this.__stage !== stage) { @@ -155,33 +155,33 @@ this.stageRenderGroup.setRenderable(stage); } - // update any textures + // update any textures PIXI.WebGLRenderer.updateTextures(); - - // update the scene graph + + // update the scene graph PIXI.visibleCount++; stage.updateTransform(); - + var gl = this.gl; - + // -- Does this need to be set every frame? -- // - gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - + gl.colorMask(true, true, true, this.transparent); + gl.viewport(0, 0, this.width, this.height); + gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); + + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); // HACK TO TEST - + this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; - + PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + this.stageRenderGroup.render(PIXI.projection); - + // interaction // run interaction! if(stage.interactive) @@ -193,18 +193,18 @@ stage.interactionManager.setTarget(this); } } - + // after rendering lets confirm all frames that have been uodated.. if(PIXI.Texture.frameUpdates.length > 0) { - for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) + for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) { PIXI.Texture.frameUpdates[i].updateFrame = false; - }; - + } + PIXI.Texture.frameUpdates = []; } -} +}; /** * Updates the textures loaded into this webgl renderer @@ -215,12 +215,18 @@ */ PIXI.WebGLRenderer.updateTextures = function() { + var i = 0; + //TODO break this out into a texture manager... - for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); - for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + for (i = 0; i < PIXI.texturesToUpdate.length; i++) + PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); + + for (i = 0; i < PIXI.texturesToDestroy.length; i++) + PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; -} +}; /** * Updates a loaded webgl texture @@ -234,7 +240,7 @@ { //TODO break this out into a texture manager... var gl = PIXI.gl; - + if(!texture._glTexture) { texture._glTexture = gl.createTexture(); @@ -264,7 +270,7 @@ gl.bindTexture(gl.TEXTURE_2D, null); } -} +}; /** * Destroys a loaded webgl texture @@ -283,7 +289,7 @@ texture._glTexture = gl.createTexture(); gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture); } -} +}; /** * resizes the webGL view to the specified width and height @@ -300,13 +306,13 @@ this.view.width = width; this.view.height = height; - this.gl.viewport(0, 0, this.width, this.height); + this.gl.viewport(0, 0, this.width, this.height); //var projectionMatrix = this.projectionMatrix; PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + //PIXI.size.x = this.width/2; //PIXI.size.y = -this.height/2; @@ -314,7 +320,7 @@ // projectionMatrix[5] = -2/this.height; // projectionMatrix[12] = -1; // projectionMatrix[13] = 1; -} +}; /** * Handles a lost webgl context @@ -327,7 +333,7 @@ { event.preventDefault(); this.contextLost = true; -} +}; /** * Handles a restored webgl context @@ -336,28 +342,28 @@ * @param event {Event} * @private */ -PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) +PIXI.WebGLRenderer.prototype.handleContextRestored = function() { - this.gl = this.view.getContext("experimental-webgl", { + this.gl = this.view.getContext('experimental-webgl', { alpha: true }); - this.initShaders(); + this.initShaders(); - for(var key in PIXI.TextureCache) + for(var key in PIXI.TextureCache) { - var texture = PIXI.TextureCache[key].baseTexture; - texture._glTexture = null; - PIXI.WebGLRenderer.updateTexture(texture); - }; + var texture = PIXI.TextureCache[key].baseTexture; + texture._glTexture = null; + PIXI.WebGLRenderer.updateTexture(texture); + } - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - this.batchs[i].restoreLostContext(this.gl)// + this.batchs[i].restoreLostContext(this.gl); this.batchs[i].dirty = true; - }; + } PIXI._restoreBatchs(this.gl); this.contextLost = false; -} +}; diff --git a/src/pixi/renderers/webgl/WebGLShaders.js b/src/pixi/renderers/webgl/WebGLShaders.js index 016d37c..b6b66b7 100644 --- a/src/pixi/renderers/webgl/WebGLShaders.js +++ b/src/pixi/renderers/webgl/WebGLShaders.js @@ -2,8 +2,7 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - -PIXI.initDefaultShaders = function() +PIXI.initDefaultShaders = function() { PIXI.primitiveShader = new PIXI.PrimitiveShader(); PIXI.primitiveShader.init(); @@ -14,53 +13,51 @@ PIXI.defaultShader = new PIXI.PixiShader(); PIXI.defaultShader.init(); - var gl = PIXI.gl; + var gl = PIXI.gl; var shaderProgram = PIXI.defaultShader.program; - gl.useProgram(shaderProgram); - + gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.activatePrimitiveShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.primitiveShader.program); - + gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute); -} +}; PIXI.deactivatePrimitiveShader = function() { var gl = PIXI.gl; gl.useProgram(PIXI.defaultShader.program); - + gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); - -} +}; PIXI.activateStripShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.stripShader.program); // gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.deactivateStripShader = function() { @@ -68,7 +65,7 @@ gl.useProgram(PIXI.defaultShader.program); //gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; /* @@ -78,12 +75,12 @@ PIXI.CompileVertexShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); -} +}; PIXI.CompileFragmentShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); -} +}; PIXI._CompileShader = function(gl, shaderSrc, shaderType) { @@ -93,29 +90,28 @@ gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - console.log(gl.getShaderInfoLog(shader)); + window.console.log(gl.getShaderInfoLog(shader)); return null; } return shader; -} - +}; PIXI.compileProgram = function(vertexSrc, fragmentSrc) { var gl = PIXI.gl; var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); - - var shaderProgram = gl.createProgram(); - - gl.attachShader(shaderProgram, vertexShader); - gl.attachShader(shaderProgram, fragmentShader); - gl.linkProgram(shaderProgram); - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - console.log("Could not initialise shaders"); - } + var shaderProgram = gl.createProgram(); + + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + window.console.log("Could not initialise shaders"); + } return shaderProgram; -} +}; diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index 128c217..fb5fb8c 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * A Text Object will create a line(s) of text using bitmap font. To split a line you can use "\n", "\r" or "\r\n" + * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' * You can generate the fnt files using * http://www.angelcode.com/products/bmfont/ for windows or * http://www.bmglyph.com/ for mac. @@ -13,8 +13,8 @@ * @constructor * @param text {String} The copy that you would like the text to display * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText = function(text, style) { @@ -23,8 +23,7 @@ this.setText(text); this.setStyle(style); this.updateText(); - this.dirty = false - + this.dirty = false; }; // constructor @@ -39,7 +38,7 @@ */ PIXI.BitmapText.prototype.setText = function(text) { - this.text = text || " "; + this.text = text || ' '; this.dirty = true; }; @@ -48,16 +47,16 @@ * * @method setStyle * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText.prototype.setStyle = function(style) { style = style || {}; - style.align = style.align || "left"; + style.align = style.align || 'left'; this.style = style; - var font = style.font.split(" "); + var font = style.font.split(' '); this.fontName = font[font.length - 1]; this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; @@ -100,7 +99,7 @@ if(prevCharCode && charData[prevCharCode]) { - pos.x += charData.kerning[prevCharCode]; + pos.x += charData.kerning[prevCharCode]; } chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; @@ -115,11 +114,11 @@ for(i = 0; i <= line; i++) { var alignOffset = 0; - if(this.style.align == "right") + if(this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } @@ -128,7 +127,7 @@ for(i = 0; i < chars.length; i++) { - var c = new PIXI.Sprite(chars[i].texture)//PIXI.Sprite.fromFrame(chars[i].charCode); + var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode); c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; c.position.y = chars[i].position.y * scale; c.scale.x = c.scale.y = scale; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderGroup.js b/src/pixi/renderers/webgl/WebGLRenderGroup.js index 990d9be..47d8b96 100644 --- a/src/pixi/renderers/webgl/WebGLRenderGroup.js +++ b/src/pixi/renderers/webgl/WebGLRenderGroup.js @@ -18,16 +18,16 @@ PIXI.WebGLRenderGroup = function(gl, transparent) { this.gl = gl; - this.root; - - this.backgroundColor; - this.transparent = transparent == undefined ? true : transparent; - + this.root = null; + + this.backgroundColor = undefined; + this.transparent = transparent === undefined ? true : transparent; + this.batchs = []; this.toRemove = []; - console.log(this.transparent) + //console.log(this.transparent); this.filterManager = new PIXI.WebGLFilterManager(this.transparent); -} +}; // constructor PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup; @@ -37,22 +37,22 @@ * * @method setRenderable * @param displayObject {DisplayObject} - * @private + * @private */ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); - + displayObject.worldVisible = displayObject.visible; - + // soooooo // // to check if any batchs exist already?? - + // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); -} +}; /** * Renders the stage to its webgl view @@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer) { PIXI.WebGLRenderer.updateTextures(); - + var gl = this.gl; gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y); this.filterManager.begin(projection, buffer); - + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // will render all the elements in the group var renderable; - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - + renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); continue; } - + // render special this.renderSpecial(renderable, projection); } - -} +}; /** * Renders a specific displayObject @@ -109,13 +108,16 @@ // to do! // render part of the scene... - + var startIndex; var startBatchIndex; - + var endIndex; var endBatchIndex; - + var endBatch; + + var head; + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -130,25 +132,24 @@ } var startBatch = nextRenderable.batch; //console.log(nextRenderable); - + //console.log(renderable) if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; - - var head = startBatch.head; - var next = head; - + + head = startBatch.head; + // ok now we have the batch.. need to find the start index! - if(head == nextRenderable) + if(head === nextRenderable) { startIndex = 0; } else { startIndex = 1; - - while(head.__next != nextRenderable) + + while(head.__next !== nextRenderable) { startIndex++; head = head.__next; @@ -159,7 +160,7 @@ { startBatch = nextRenderable; } - + // Get the LAST renderable object var lastRenderable = displayObject.last; while(lastRenderable._iPrev) @@ -167,22 +168,22 @@ if(lastRenderable.renderable && lastRenderable.__renderGroup)break; lastRenderable = lastRenderable._iNext; } - + if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; - - var head = endBatch.head; - - if(head == lastRenderable) + + head = endBatch.head; + + if(head === lastRenderable) { endIndex = 0; } else { endIndex = 1; - - while(head.__next != lastRenderable) + + while(head.__next !== lastRenderable) { endIndex++; head = head.__next; @@ -193,11 +194,11 @@ { endBatch = lastRenderable; } - + //console.log(endBatch); // TODO - need to fold this up a bit! - - if(startBatch == endBatch) + + if(startBatch === endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { @@ -209,11 +210,11 @@ } return; } - + // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); - + // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { @@ -223,12 +224,13 @@ { this.renderSpecial(startBatch, projection); } - + // DO the middle batchs.. - for (var i=startBatchIndex+1; i < endBatchIndex; i++) + var renderable; + for (var i = startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; - + if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); @@ -238,7 +240,7 @@ this.renderSpecial(renderable, projection); } } - + // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { @@ -248,7 +250,7 @@ { this.renderSpecial(endBatch, projection); } -} +}; /** * Renders a specific renderable @@ -260,8 +262,8 @@ */ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) { - - var worldVisible = renderable.vcount === PIXI.visibleCount + + var worldVisible = renderable.vcount === PIXI.visibleCount; if(renderable instanceof PIXI.TilingSprite) @@ -284,9 +286,8 @@ { this.handleFilterBlock(renderable, projection); } -} +}; -flip = false; var maskStack = []; var maskPosition = 0; @@ -298,30 +299,30 @@ * for now only masks are supported.. */ var gl = PIXI.gl; - + if(filterBlock.open) { if(filterBlock.data instanceof Array) { this.filterManager.pushFilter(filterBlock); // ok so.. - + } else - { + { maskPosition++; - maskStack.push(filterBlock) - + maskStack.push(filterBlock); + gl.enable(gl.STENCIL_TEST); - + gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - + PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -335,27 +336,26 @@ } else { - var maskData = maskStack.pop(filterBlock) - + var maskData = maskStack.pop(filterBlock); if(maskData) { gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); PIXI.WebGLGraphics.renderGraphics(maskData.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - }; + } gl.disable(gl.STENCIL_TEST); } } -} +}; /** * Updates a webgl texture @@ -366,23 +366,23 @@ */ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { - + // TODO definitely can optimse this function.. - + this.removeObject(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; - while(previousRenderable != this.root) + while(previousRenderable !== this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -395,9 +395,9 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - + this.insertObject(displayObject, previousRenderable, nextRenderable); -} +}; /** * Adds filter blocks @@ -417,13 +417,13 @@ * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -431,13 +431,13 @@ * scene graph */ var previousRenderable2 = end; - while(previousRenderable2 != this.root.first) + while(previousRenderable2 !== this.root.first) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); -} +}; /** * Remove filter blocks @@ -451,7 +451,7 @@ { this.removeObject(start); this.removeObject(end); -} +}; /** * Adds a display object and children to the webgl context @@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ - + var previousRenderable = displayObject.first; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -489,26 +489,27 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - - // one the display object hits this. we can break the loop - + + // one the display object hits this. we can break the loop + var tempObject = displayObject.first; var testObject = displayObject.last._iNext; - do + + do { tempObject.__renderGroup = this; - + if(tempObject.renderable) { - + this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } - + tempObject = tempObject._iNext; } - while(tempObject != testObject) -} + while(tempObject !== testObject); +}; /** * Removes a display object and children to the webgl context @@ -519,18 +520,16 @@ */ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { - if(displayObject.__renderGroup != this)return; - -// var displayObject = displayObject.first; - var lastObject = displayObject.last; - do + if(displayObject.__renderGroup !== this) return; + + do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } - while(displayObject) -} + while(displayObject); +}; /** * Inserts a displayObject into the linked list @@ -546,22 +545,23 @@ // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; - + var index, batch; + /* * so now we have the next renderable and the previous renderable - * + * */ if(displayObject instanceof PIXI.Sprite) { - var previousBatch - var nextBatch - + var previousBatch; + var nextBatch; + if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { - if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; @@ -573,40 +573,40 @@ // TODO reword! previousBatch = previousSprite; } - + if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; - + //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { - if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { - if(nextBatch == previousBatch) + if(nextBatch === previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var batch = PIXI.WebGLRenderer.getBatch(); + batch = PIXI.WebGLRenderer.getBatch(); - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); - + return; } } @@ -615,39 +615,39 @@ else { // TODO re-word! - + nextBatch = nextSprite; } } - + /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ - - var batch = PIXI.WebGLRenderer.getBatch(); + + batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); - if(previousBatch) // if this is invalid it means + if(previousBatch) // if this is invalid it means { - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } - + return; } else if(displayObject instanceof PIXI.TilingSprite) { - + // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); - + } else if(displayObject instanceof PIXI.Strip) { @@ -655,20 +655,21 @@ this.initStrip(displayObject); // this.batchs.push(displayObject); } + /* else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); - + // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } - - this.insertAfter(displayObject, previousSprite); - - // insert and SPLIT! + */ -} + this.insertAfter(displayObject, previousSprite); + + // insert and SPLIT! +}; /** * Inserts a displayObject into the linked list @@ -680,36 +681,38 @@ */ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { + var index; + if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; - + if(previousBatch) { // so this object is in a batch! - + // is it not? need to split the batch - if(previousBatch.tail == displayObject) + if(previousBatch.tail === displayObject) { - // is it tail? insert in to batchs - var index = this.batchs.indexOf( previousBatch ); + // is it tail? insert in to batchs + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // - + // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); - + // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } @@ -720,10 +723,10 @@ } else { - var index = this.batchs.indexOf( displayObject ); + index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } -} +}; /** * Removes a displayObject from the linked list @@ -736,26 +739,26 @@ { // loop through children.. // display object // - + // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. - * + * */ var batchToRemove; - + if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering - + batch.remove(displayObject); - - if(batch.size==0) + + if(batch.size === 0) { batchToRemove = batch; } @@ -764,44 +767,44 @@ { batchToRemove = displayObject; } - + /* * Looks like there is somthing that needs removing! */ - if(batchToRemove) + if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); - if(index == -1)return;// this means it was added then removed before rendered - + if(index === -1)return;// this means it was added then removed before rendered + // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? - if(index == 0 || index == this.batchs.length-1) + if(index === 0 || index === this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); - + return; } - + if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { - if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) + if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); - + if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } - + this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } -} +}; /** @@ -816,26 +819,26 @@ var gl = this.gl; // make the texture tilable.. - + sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); - + sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); - + sprite.colors = new Float32Array([1,1,1,1]); - - sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); - + + sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]); + sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); @@ -847,7 +850,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); - + // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) @@ -861,7 +864,7 @@ { sprite.texture.baseTexture._powerOf2 = true; } -} +}; /** * Renders a Strip @@ -879,18 +882,16 @@ var shader = PIXI.stripShader; - var program = shader.program; - var m = PIXI.mat3.clone(strip.worldTransform); - + PIXI.mat3.transpose(m); - + // console.log(projection) - // set the matrix transform for the + // set the matrix transform for the gl.uniformMatrix3fv(shader.translationMatrix, false, m); gl.uniform2f(shader.projectionVector, projection.x, projection.y); gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(shader.alpha, strip.worldAlpha); /* @@ -903,24 +904,24 @@ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ - + //console.log("!!") if(!strip.dirty) - { + { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } @@ -928,32 +929,32 @@ { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); // console.log(strip.texture.baseTexture._glTexture) gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); - + } - + gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); - + PIXI.deactivateStripShader(); //gl.useProgram(PIXI.currentProgram); -} +}; /** * Renders a TilingSprite @@ -967,35 +968,32 @@ { var gl = this.gl; - - var shaderProgram = PIXI.shaderProgram; - var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; - + var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; - + sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; - + sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; - + sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs); + this.renderStrip(sprite, projectionMatrix); -} +}; /** * Initializes a strip to be rendered @@ -1008,13 +1006,12 @@ { // build the strip! var gl = this.gl; - var shaderProgram = this.shaderProgram; - + strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); @@ -1024,8 +1021,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); -} - +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 9b5e703..1acec35 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -6,7 +6,7 @@ // an instance of the gl context.. // only one at the moment :/ -PIXI.gl; +PIXI.gl = null; /** * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer @@ -21,7 +21,7 @@ * @param view {Canvas} the canvas to use as a view, optional * @param transparent=false {Boolean} the transparency of the render view, default false * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * + * */ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) { @@ -32,14 +32,14 @@ this.width = width || 800; this.height = height || 600; - this.view = view || document.createElement( 'canvas' ); + this.view = view || document.createElement( 'canvas' ); this.view.width = this.width; this.view.height = this.height; - // deal with losing context.. + // deal with losing context.. var scope = this; - this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) - this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) + this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false); + this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false); this.batchs = []; @@ -48,30 +48,30 @@ antialias:!!antialias, // SPEED UP?? premultipliedAlpha:false, stencil:true - } + }; //try 'experimental-webgl' try { - PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options); + PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options); } catch (e) { //try 'webgl' try { - PIXI.gl = this.gl = this.view.getContext("webgl", options); - } catch (e) { + PIXI.gl = this.gl = this.view.getContext('webgl', options); + } catch (e2) { // fail, not able to get a context - throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); + throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); } } PIXI.initDefaultShaders(); - - + + // PIXI.activateDefaultShader(); var gl = this.gl; - + gl.useProgram(PIXI.defaultShader.program); @@ -82,7 +82,7 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); - gl.colorMask(true, true, true, this.transparent); + gl.colorMask(true, true, true, this.transparent); PIXI.projection = new PIXI.Point(400, 300); PIXI.offset = new PIXI.Point(0, 0); @@ -96,7 +96,7 @@ this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent); // this.stageRenderGroup. = this.transparent -} +}; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; @@ -107,11 +107,11 @@ * @static * @method getBatch * @return {WebGLBatch} - * @private + * @private */ PIXI.WebGLRenderer.getBatch = function() { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); } @@ -119,7 +119,7 @@ { return PIXI._batchs.pop(); } -} +}; /** * Puts a batch back into the pool @@ -131,9 +131,9 @@ */ PIXI.WebGLRenderer.returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * Renders the stage to its webGL view @@ -144,8 +144,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage) { if(this.contextLost)return; - - + + // if rendering a new stage clear the batchs.. if(this.__stage !== stage) { @@ -155,33 +155,33 @@ this.stageRenderGroup.setRenderable(stage); } - // update any textures + // update any textures PIXI.WebGLRenderer.updateTextures(); - - // update the scene graph + + // update the scene graph PIXI.visibleCount++; stage.updateTransform(); - + var gl = this.gl; - + // -- Does this need to be set every frame? -- // - gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - + gl.colorMask(true, true, true, this.transparent); + gl.viewport(0, 0, this.width, this.height); + gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); + + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); // HACK TO TEST - + this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; - + PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + this.stageRenderGroup.render(PIXI.projection); - + // interaction // run interaction! if(stage.interactive) @@ -193,18 +193,18 @@ stage.interactionManager.setTarget(this); } } - + // after rendering lets confirm all frames that have been uodated.. if(PIXI.Texture.frameUpdates.length > 0) { - for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) + for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) { PIXI.Texture.frameUpdates[i].updateFrame = false; - }; - + } + PIXI.Texture.frameUpdates = []; } -} +}; /** * Updates the textures loaded into this webgl renderer @@ -215,12 +215,18 @@ */ PIXI.WebGLRenderer.updateTextures = function() { + var i = 0; + //TODO break this out into a texture manager... - for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); - for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + for (i = 0; i < PIXI.texturesToUpdate.length; i++) + PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); + + for (i = 0; i < PIXI.texturesToDestroy.length; i++) + PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; -} +}; /** * Updates a loaded webgl texture @@ -234,7 +240,7 @@ { //TODO break this out into a texture manager... var gl = PIXI.gl; - + if(!texture._glTexture) { texture._glTexture = gl.createTexture(); @@ -264,7 +270,7 @@ gl.bindTexture(gl.TEXTURE_2D, null); } -} +}; /** * Destroys a loaded webgl texture @@ -283,7 +289,7 @@ texture._glTexture = gl.createTexture(); gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture); } -} +}; /** * resizes the webGL view to the specified width and height @@ -300,13 +306,13 @@ this.view.width = width; this.view.height = height; - this.gl.viewport(0, 0, this.width, this.height); + this.gl.viewport(0, 0, this.width, this.height); //var projectionMatrix = this.projectionMatrix; PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + //PIXI.size.x = this.width/2; //PIXI.size.y = -this.height/2; @@ -314,7 +320,7 @@ // projectionMatrix[5] = -2/this.height; // projectionMatrix[12] = -1; // projectionMatrix[13] = 1; -} +}; /** * Handles a lost webgl context @@ -327,7 +333,7 @@ { event.preventDefault(); this.contextLost = true; -} +}; /** * Handles a restored webgl context @@ -336,28 +342,28 @@ * @param event {Event} * @private */ -PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) +PIXI.WebGLRenderer.prototype.handleContextRestored = function() { - this.gl = this.view.getContext("experimental-webgl", { + this.gl = this.view.getContext('experimental-webgl', { alpha: true }); - this.initShaders(); + this.initShaders(); - for(var key in PIXI.TextureCache) + for(var key in PIXI.TextureCache) { - var texture = PIXI.TextureCache[key].baseTexture; - texture._glTexture = null; - PIXI.WebGLRenderer.updateTexture(texture); - }; + var texture = PIXI.TextureCache[key].baseTexture; + texture._glTexture = null; + PIXI.WebGLRenderer.updateTexture(texture); + } - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - this.batchs[i].restoreLostContext(this.gl)// + this.batchs[i].restoreLostContext(this.gl); this.batchs[i].dirty = true; - }; + } PIXI._restoreBatchs(this.gl); this.contextLost = false; -} +}; diff --git a/src/pixi/renderers/webgl/WebGLShaders.js b/src/pixi/renderers/webgl/WebGLShaders.js index 016d37c..b6b66b7 100644 --- a/src/pixi/renderers/webgl/WebGLShaders.js +++ b/src/pixi/renderers/webgl/WebGLShaders.js @@ -2,8 +2,7 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - -PIXI.initDefaultShaders = function() +PIXI.initDefaultShaders = function() { PIXI.primitiveShader = new PIXI.PrimitiveShader(); PIXI.primitiveShader.init(); @@ -14,53 +13,51 @@ PIXI.defaultShader = new PIXI.PixiShader(); PIXI.defaultShader.init(); - var gl = PIXI.gl; + var gl = PIXI.gl; var shaderProgram = PIXI.defaultShader.program; - gl.useProgram(shaderProgram); - + gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.activatePrimitiveShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.primitiveShader.program); - + gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute); -} +}; PIXI.deactivatePrimitiveShader = function() { var gl = PIXI.gl; gl.useProgram(PIXI.defaultShader.program); - + gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); - -} +}; PIXI.activateStripShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.stripShader.program); // gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.deactivateStripShader = function() { @@ -68,7 +65,7 @@ gl.useProgram(PIXI.defaultShader.program); //gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; /* @@ -78,12 +75,12 @@ PIXI.CompileVertexShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); -} +}; PIXI.CompileFragmentShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); -} +}; PIXI._CompileShader = function(gl, shaderSrc, shaderType) { @@ -93,29 +90,28 @@ gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - console.log(gl.getShaderInfoLog(shader)); + window.console.log(gl.getShaderInfoLog(shader)); return null; } return shader; -} - +}; PIXI.compileProgram = function(vertexSrc, fragmentSrc) { var gl = PIXI.gl; var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); - - var shaderProgram = gl.createProgram(); - - gl.attachShader(shaderProgram, vertexShader); - gl.attachShader(shaderProgram, fragmentShader); - gl.linkProgram(shaderProgram); - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - console.log("Could not initialise shaders"); - } + var shaderProgram = gl.createProgram(); + + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + window.console.log("Could not initialise shaders"); + } return shaderProgram; -} +}; diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index 128c217..fb5fb8c 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * A Text Object will create a line(s) of text using bitmap font. To split a line you can use "\n", "\r" or "\r\n" + * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' * You can generate the fnt files using * http://www.angelcode.com/products/bmfont/ for windows or * http://www.bmglyph.com/ for mac. @@ -13,8 +13,8 @@ * @constructor * @param text {String} The copy that you would like the text to display * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText = function(text, style) { @@ -23,8 +23,7 @@ this.setText(text); this.setStyle(style); this.updateText(); - this.dirty = false - + this.dirty = false; }; // constructor @@ -39,7 +38,7 @@ */ PIXI.BitmapText.prototype.setText = function(text) { - this.text = text || " "; + this.text = text || ' '; this.dirty = true; }; @@ -48,16 +47,16 @@ * * @method setStyle * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText.prototype.setStyle = function(style) { style = style || {}; - style.align = style.align || "left"; + style.align = style.align || 'left'; this.style = style; - var font = style.font.split(" "); + var font = style.font.split(' '); this.fontName = font[font.length - 1]; this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; @@ -100,7 +99,7 @@ if(prevCharCode && charData[prevCharCode]) { - pos.x += charData.kerning[prevCharCode]; + pos.x += charData.kerning[prevCharCode]; } chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; @@ -115,11 +114,11 @@ for(i = 0; i <= line; i++) { var alignOffset = 0; - if(this.style.align == "right") + if(this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } @@ -128,7 +127,7 @@ for(i = 0; i < chars.length; i++) { - var c = new PIXI.Sprite(chars[i].texture)//PIXI.Sprite.fromFrame(chars[i].charCode); + var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode); c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; c.position.y = chars[i].position.y * scale; c.scale.x = c.scale.y = scale; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index f708d85..75d50d0 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -3,25 +3,25 @@ */ /** - * A Text Object will create a line(s) of text to split a line you can use "\n" + * A Text Object will create a line(s) of text to split a line you can use '\n' * * @class Text * @extends Sprite * @constructor * @param text {String} The copy that you would like the text to display * @param [style] {Object} The style parameters - * @param [style.font] {String} default "bold 20pt Arial" The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font] {String} default 'bold 20pt Arial' The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap */ PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - this.context = this.canvas.getContext("2d"); + this.canvas = document.createElement('canvas'); + this.context = this.canvas.getContext('2d'); PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); @@ -40,10 +40,10 @@ * * @method setStyle * @param [style] {Object} The style parameters - * @param [style.font="bold 20pt Arial"] {String} The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke="black"] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font='bold 20pt Arial'] {String} The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke='black'] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap @@ -51,10 +51,10 @@ PIXI.Text.prototype.setStyle = function(style) { style = style || {}; - style.font = style.font || "bold 20pt Arial"; - style.fill = style.fill || "black"; - style.align = style.align || "left"; - style.stroke = style.stroke || "black"; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 + style.font = style.font || 'bold 20pt Arial'; + style.fill = style.fill || 'black'; + style.align = style.align || 'left'; + style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 style.strokeThickness = style.strokeThickness || 0; style.wordWrap = style.wordWrap || false; style.wordWrapWidth = style.wordWrapWidth || 100; @@ -63,14 +63,14 @@ }; /** - * Set the copy for the text object. To split a line you can use "\n" + * Set the copy for the text object. To split a line you can use '\n' * * @method setText * @param {String} text The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { - this.text = text.toString() || " "; + this.text = text.toString() || ' '; this.dirty = true; }; @@ -105,7 +105,7 @@ this.canvas.width = maxLineWidth + this.style.strokeThickness; //calculate text height - var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + var lineHeight = this.determineFontHeight('font: ' + this.style.font + ';') + this.style.strokeThickness; this.canvas.height = lineHeight * lines.length; //set canvas text styles @@ -115,18 +115,18 @@ this.context.strokeStyle = this.style.stroke; this.context.lineWidth = this.style.strokeThickness; - this.context.textBaseline = "top"; + this.context.textBaseline = 'top'; //draw lines line by line for (i = 0; i < lines.length; i++) { var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); - if(this.style.align == "right") + if(this.style.align === 'right') { linePosition.x += maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { linePosition.x += (maxLineWidth - lineWidths[i]) / 2; } @@ -197,11 +197,11 @@ if(!result) { - var body = document.getElementsByTagName("body")[0]; - var dummy = document.createElement("div"); - var dummyText = document.createTextNode("M"); + var body = document.getElementsByTagName('body')[0]; + var dummy = document.createElement('div'); + var dummyText = document.createTextNode('M'); dummy.appendChild(dummyText); - dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0'); + dummy.setAttribute('style', fontStyle + ';position:absolute;top:0;left:0'); body.appendChild(dummy); result = dummy.offsetHeight; @@ -225,34 +225,34 @@ { // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. - var result = ""; - var lines = text.split("\n"); + var result = ''; + var lines = text.split('\n'); for (var i = 0; i < lines.length; i++) { var spaceLeft = this.style.wordWrapWidth; - var words = lines[i].split(" "); + var words = lines[i].split(' '); for (var j = 0; j < words.length; j++) { var wordWidth = this.context.measureText(words[j]).width; - var wordWidthWithSpace = wordWidth + this.context.measureText(" ").width; + var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if(wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is // greater than the word wrap width. if(j > 0) { - result += "\n"; + result += '\n'; } - result += words[j] + " "; + result += words[j] + ' '; spaceLeft = this.style.wordWrapWidth - wordWidth; } else { spaceLeft -= wordWidthWithSpace; - result += words[j] + " "; + result += words[j] + ' '; } } - result += "\n"; + result += '\n'; } return result; }; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderGroup.js b/src/pixi/renderers/webgl/WebGLRenderGroup.js index 990d9be..47d8b96 100644 --- a/src/pixi/renderers/webgl/WebGLRenderGroup.js +++ b/src/pixi/renderers/webgl/WebGLRenderGroup.js @@ -18,16 +18,16 @@ PIXI.WebGLRenderGroup = function(gl, transparent) { this.gl = gl; - this.root; - - this.backgroundColor; - this.transparent = transparent == undefined ? true : transparent; - + this.root = null; + + this.backgroundColor = undefined; + this.transparent = transparent === undefined ? true : transparent; + this.batchs = []; this.toRemove = []; - console.log(this.transparent) + //console.log(this.transparent); this.filterManager = new PIXI.WebGLFilterManager(this.transparent); -} +}; // constructor PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup; @@ -37,22 +37,22 @@ * * @method setRenderable * @param displayObject {DisplayObject} - * @private + * @private */ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); - + displayObject.worldVisible = displayObject.visible; - + // soooooo // // to check if any batchs exist already?? - + // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); -} +}; /** * Renders the stage to its webgl view @@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer) { PIXI.WebGLRenderer.updateTextures(); - + var gl = this.gl; gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y); this.filterManager.begin(projection, buffer); - + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // will render all the elements in the group var renderable; - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - + renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); continue; } - + // render special this.renderSpecial(renderable, projection); } - -} +}; /** * Renders a specific displayObject @@ -109,13 +108,16 @@ // to do! // render part of the scene... - + var startIndex; var startBatchIndex; - + var endIndex; var endBatchIndex; - + var endBatch; + + var head; + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -130,25 +132,24 @@ } var startBatch = nextRenderable.batch; //console.log(nextRenderable); - + //console.log(renderable) if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; - - var head = startBatch.head; - var next = head; - + + head = startBatch.head; + // ok now we have the batch.. need to find the start index! - if(head == nextRenderable) + if(head === nextRenderable) { startIndex = 0; } else { startIndex = 1; - - while(head.__next != nextRenderable) + + while(head.__next !== nextRenderable) { startIndex++; head = head.__next; @@ -159,7 +160,7 @@ { startBatch = nextRenderable; } - + // Get the LAST renderable object var lastRenderable = displayObject.last; while(lastRenderable._iPrev) @@ -167,22 +168,22 @@ if(lastRenderable.renderable && lastRenderable.__renderGroup)break; lastRenderable = lastRenderable._iNext; } - + if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; - - var head = endBatch.head; - - if(head == lastRenderable) + + head = endBatch.head; + + if(head === lastRenderable) { endIndex = 0; } else { endIndex = 1; - - while(head.__next != lastRenderable) + + while(head.__next !== lastRenderable) { endIndex++; head = head.__next; @@ -193,11 +194,11 @@ { endBatch = lastRenderable; } - + //console.log(endBatch); // TODO - need to fold this up a bit! - - if(startBatch == endBatch) + + if(startBatch === endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { @@ -209,11 +210,11 @@ } return; } - + // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); - + // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { @@ -223,12 +224,13 @@ { this.renderSpecial(startBatch, projection); } - + // DO the middle batchs.. - for (var i=startBatchIndex+1; i < endBatchIndex; i++) + var renderable; + for (var i = startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; - + if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); @@ -238,7 +240,7 @@ this.renderSpecial(renderable, projection); } } - + // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { @@ -248,7 +250,7 @@ { this.renderSpecial(endBatch, projection); } -} +}; /** * Renders a specific renderable @@ -260,8 +262,8 @@ */ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) { - - var worldVisible = renderable.vcount === PIXI.visibleCount + + var worldVisible = renderable.vcount === PIXI.visibleCount; if(renderable instanceof PIXI.TilingSprite) @@ -284,9 +286,8 @@ { this.handleFilterBlock(renderable, projection); } -} +}; -flip = false; var maskStack = []; var maskPosition = 0; @@ -298,30 +299,30 @@ * for now only masks are supported.. */ var gl = PIXI.gl; - + if(filterBlock.open) { if(filterBlock.data instanceof Array) { this.filterManager.pushFilter(filterBlock); // ok so.. - + } else - { + { maskPosition++; - maskStack.push(filterBlock) - + maskStack.push(filterBlock); + gl.enable(gl.STENCIL_TEST); - + gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - + PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -335,27 +336,26 @@ } else { - var maskData = maskStack.pop(filterBlock) - + var maskData = maskStack.pop(filterBlock); if(maskData) { gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); PIXI.WebGLGraphics.renderGraphics(maskData.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - }; + } gl.disable(gl.STENCIL_TEST); } } -} +}; /** * Updates a webgl texture @@ -366,23 +366,23 @@ */ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { - + // TODO definitely can optimse this function.. - + this.removeObject(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; - while(previousRenderable != this.root) + while(previousRenderable !== this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -395,9 +395,9 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - + this.insertObject(displayObject, previousRenderable, nextRenderable); -} +}; /** * Adds filter blocks @@ -417,13 +417,13 @@ * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -431,13 +431,13 @@ * scene graph */ var previousRenderable2 = end; - while(previousRenderable2 != this.root.first) + while(previousRenderable2 !== this.root.first) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); -} +}; /** * Remove filter blocks @@ -451,7 +451,7 @@ { this.removeObject(start); this.removeObject(end); -} +}; /** * Adds a display object and children to the webgl context @@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ - + var previousRenderable = displayObject.first; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -489,26 +489,27 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - - // one the display object hits this. we can break the loop - + + // one the display object hits this. we can break the loop + var tempObject = displayObject.first; var testObject = displayObject.last._iNext; - do + + do { tempObject.__renderGroup = this; - + if(tempObject.renderable) { - + this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } - + tempObject = tempObject._iNext; } - while(tempObject != testObject) -} + while(tempObject !== testObject); +}; /** * Removes a display object and children to the webgl context @@ -519,18 +520,16 @@ */ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { - if(displayObject.__renderGroup != this)return; - -// var displayObject = displayObject.first; - var lastObject = displayObject.last; - do + if(displayObject.__renderGroup !== this) return; + + do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } - while(displayObject) -} + while(displayObject); +}; /** * Inserts a displayObject into the linked list @@ -546,22 +545,23 @@ // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; - + var index, batch; + /* * so now we have the next renderable and the previous renderable - * + * */ if(displayObject instanceof PIXI.Sprite) { - var previousBatch - var nextBatch - + var previousBatch; + var nextBatch; + if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { - if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; @@ -573,40 +573,40 @@ // TODO reword! previousBatch = previousSprite; } - + if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; - + //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { - if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { - if(nextBatch == previousBatch) + if(nextBatch === previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var batch = PIXI.WebGLRenderer.getBatch(); + batch = PIXI.WebGLRenderer.getBatch(); - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); - + return; } } @@ -615,39 +615,39 @@ else { // TODO re-word! - + nextBatch = nextSprite; } } - + /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ - - var batch = PIXI.WebGLRenderer.getBatch(); + + batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); - if(previousBatch) // if this is invalid it means + if(previousBatch) // if this is invalid it means { - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } - + return; } else if(displayObject instanceof PIXI.TilingSprite) { - + // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); - + } else if(displayObject instanceof PIXI.Strip) { @@ -655,20 +655,21 @@ this.initStrip(displayObject); // this.batchs.push(displayObject); } + /* else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); - + // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } - - this.insertAfter(displayObject, previousSprite); - - // insert and SPLIT! + */ -} + this.insertAfter(displayObject, previousSprite); + + // insert and SPLIT! +}; /** * Inserts a displayObject into the linked list @@ -680,36 +681,38 @@ */ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { + var index; + if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; - + if(previousBatch) { // so this object is in a batch! - + // is it not? need to split the batch - if(previousBatch.tail == displayObject) + if(previousBatch.tail === displayObject) { - // is it tail? insert in to batchs - var index = this.batchs.indexOf( previousBatch ); + // is it tail? insert in to batchs + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // - + // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); - + // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } @@ -720,10 +723,10 @@ } else { - var index = this.batchs.indexOf( displayObject ); + index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } -} +}; /** * Removes a displayObject from the linked list @@ -736,26 +739,26 @@ { // loop through children.. // display object // - + // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. - * + * */ var batchToRemove; - + if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering - + batch.remove(displayObject); - - if(batch.size==0) + + if(batch.size === 0) { batchToRemove = batch; } @@ -764,44 +767,44 @@ { batchToRemove = displayObject; } - + /* * Looks like there is somthing that needs removing! */ - if(batchToRemove) + if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); - if(index == -1)return;// this means it was added then removed before rendered - + if(index === -1)return;// this means it was added then removed before rendered + // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? - if(index == 0 || index == this.batchs.length-1) + if(index === 0 || index === this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); - + return; } - + if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { - if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) + if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); - + if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } - + this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } -} +}; /** @@ -816,26 +819,26 @@ var gl = this.gl; // make the texture tilable.. - + sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); - + sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); - + sprite.colors = new Float32Array([1,1,1,1]); - - sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); - + + sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]); + sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); @@ -847,7 +850,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); - + // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) @@ -861,7 +864,7 @@ { sprite.texture.baseTexture._powerOf2 = true; } -} +}; /** * Renders a Strip @@ -879,18 +882,16 @@ var shader = PIXI.stripShader; - var program = shader.program; - var m = PIXI.mat3.clone(strip.worldTransform); - + PIXI.mat3.transpose(m); - + // console.log(projection) - // set the matrix transform for the + // set the matrix transform for the gl.uniformMatrix3fv(shader.translationMatrix, false, m); gl.uniform2f(shader.projectionVector, projection.x, projection.y); gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(shader.alpha, strip.worldAlpha); /* @@ -903,24 +904,24 @@ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ - + //console.log("!!") if(!strip.dirty) - { + { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } @@ -928,32 +929,32 @@ { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); // console.log(strip.texture.baseTexture._glTexture) gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); - + } - + gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); - + PIXI.deactivateStripShader(); //gl.useProgram(PIXI.currentProgram); -} +}; /** * Renders a TilingSprite @@ -967,35 +968,32 @@ { var gl = this.gl; - - var shaderProgram = PIXI.shaderProgram; - var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; - + var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; - + sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; - + sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; - + sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs); + this.renderStrip(sprite, projectionMatrix); -} +}; /** * Initializes a strip to be rendered @@ -1008,13 +1006,12 @@ { // build the strip! var gl = this.gl; - var shaderProgram = this.shaderProgram; - + strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); @@ -1024,8 +1021,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); -} - +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 9b5e703..1acec35 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -6,7 +6,7 @@ // an instance of the gl context.. // only one at the moment :/ -PIXI.gl; +PIXI.gl = null; /** * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer @@ -21,7 +21,7 @@ * @param view {Canvas} the canvas to use as a view, optional * @param transparent=false {Boolean} the transparency of the render view, default false * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * + * */ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) { @@ -32,14 +32,14 @@ this.width = width || 800; this.height = height || 600; - this.view = view || document.createElement( 'canvas' ); + this.view = view || document.createElement( 'canvas' ); this.view.width = this.width; this.view.height = this.height; - // deal with losing context.. + // deal with losing context.. var scope = this; - this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) - this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) + this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false); + this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false); this.batchs = []; @@ -48,30 +48,30 @@ antialias:!!antialias, // SPEED UP?? premultipliedAlpha:false, stencil:true - } + }; //try 'experimental-webgl' try { - PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options); + PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options); } catch (e) { //try 'webgl' try { - PIXI.gl = this.gl = this.view.getContext("webgl", options); - } catch (e) { + PIXI.gl = this.gl = this.view.getContext('webgl', options); + } catch (e2) { // fail, not able to get a context - throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); + throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); } } PIXI.initDefaultShaders(); - - + + // PIXI.activateDefaultShader(); var gl = this.gl; - + gl.useProgram(PIXI.defaultShader.program); @@ -82,7 +82,7 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); - gl.colorMask(true, true, true, this.transparent); + gl.colorMask(true, true, true, this.transparent); PIXI.projection = new PIXI.Point(400, 300); PIXI.offset = new PIXI.Point(0, 0); @@ -96,7 +96,7 @@ this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent); // this.stageRenderGroup. = this.transparent -} +}; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; @@ -107,11 +107,11 @@ * @static * @method getBatch * @return {WebGLBatch} - * @private + * @private */ PIXI.WebGLRenderer.getBatch = function() { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); } @@ -119,7 +119,7 @@ { return PIXI._batchs.pop(); } -} +}; /** * Puts a batch back into the pool @@ -131,9 +131,9 @@ */ PIXI.WebGLRenderer.returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * Renders the stage to its webGL view @@ -144,8 +144,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage) { if(this.contextLost)return; - - + + // if rendering a new stage clear the batchs.. if(this.__stage !== stage) { @@ -155,33 +155,33 @@ this.stageRenderGroup.setRenderable(stage); } - // update any textures + // update any textures PIXI.WebGLRenderer.updateTextures(); - - // update the scene graph + + // update the scene graph PIXI.visibleCount++; stage.updateTransform(); - + var gl = this.gl; - + // -- Does this need to be set every frame? -- // - gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - + gl.colorMask(true, true, true, this.transparent); + gl.viewport(0, 0, this.width, this.height); + gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); + + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); // HACK TO TEST - + this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; - + PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + this.stageRenderGroup.render(PIXI.projection); - + // interaction // run interaction! if(stage.interactive) @@ -193,18 +193,18 @@ stage.interactionManager.setTarget(this); } } - + // after rendering lets confirm all frames that have been uodated.. if(PIXI.Texture.frameUpdates.length > 0) { - for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) + for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) { PIXI.Texture.frameUpdates[i].updateFrame = false; - }; - + } + PIXI.Texture.frameUpdates = []; } -} +}; /** * Updates the textures loaded into this webgl renderer @@ -215,12 +215,18 @@ */ PIXI.WebGLRenderer.updateTextures = function() { + var i = 0; + //TODO break this out into a texture manager... - for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); - for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + for (i = 0; i < PIXI.texturesToUpdate.length; i++) + PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); + + for (i = 0; i < PIXI.texturesToDestroy.length; i++) + PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; -} +}; /** * Updates a loaded webgl texture @@ -234,7 +240,7 @@ { //TODO break this out into a texture manager... var gl = PIXI.gl; - + if(!texture._glTexture) { texture._glTexture = gl.createTexture(); @@ -264,7 +270,7 @@ gl.bindTexture(gl.TEXTURE_2D, null); } -} +}; /** * Destroys a loaded webgl texture @@ -283,7 +289,7 @@ texture._glTexture = gl.createTexture(); gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture); } -} +}; /** * resizes the webGL view to the specified width and height @@ -300,13 +306,13 @@ this.view.width = width; this.view.height = height; - this.gl.viewport(0, 0, this.width, this.height); + this.gl.viewport(0, 0, this.width, this.height); //var projectionMatrix = this.projectionMatrix; PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + //PIXI.size.x = this.width/2; //PIXI.size.y = -this.height/2; @@ -314,7 +320,7 @@ // projectionMatrix[5] = -2/this.height; // projectionMatrix[12] = -1; // projectionMatrix[13] = 1; -} +}; /** * Handles a lost webgl context @@ -327,7 +333,7 @@ { event.preventDefault(); this.contextLost = true; -} +}; /** * Handles a restored webgl context @@ -336,28 +342,28 @@ * @param event {Event} * @private */ -PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) +PIXI.WebGLRenderer.prototype.handleContextRestored = function() { - this.gl = this.view.getContext("experimental-webgl", { + this.gl = this.view.getContext('experimental-webgl', { alpha: true }); - this.initShaders(); + this.initShaders(); - for(var key in PIXI.TextureCache) + for(var key in PIXI.TextureCache) { - var texture = PIXI.TextureCache[key].baseTexture; - texture._glTexture = null; - PIXI.WebGLRenderer.updateTexture(texture); - }; + var texture = PIXI.TextureCache[key].baseTexture; + texture._glTexture = null; + PIXI.WebGLRenderer.updateTexture(texture); + } - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - this.batchs[i].restoreLostContext(this.gl)// + this.batchs[i].restoreLostContext(this.gl); this.batchs[i].dirty = true; - }; + } PIXI._restoreBatchs(this.gl); this.contextLost = false; -} +}; diff --git a/src/pixi/renderers/webgl/WebGLShaders.js b/src/pixi/renderers/webgl/WebGLShaders.js index 016d37c..b6b66b7 100644 --- a/src/pixi/renderers/webgl/WebGLShaders.js +++ b/src/pixi/renderers/webgl/WebGLShaders.js @@ -2,8 +2,7 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - -PIXI.initDefaultShaders = function() +PIXI.initDefaultShaders = function() { PIXI.primitiveShader = new PIXI.PrimitiveShader(); PIXI.primitiveShader.init(); @@ -14,53 +13,51 @@ PIXI.defaultShader = new PIXI.PixiShader(); PIXI.defaultShader.init(); - var gl = PIXI.gl; + var gl = PIXI.gl; var shaderProgram = PIXI.defaultShader.program; - gl.useProgram(shaderProgram); - + gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.activatePrimitiveShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.primitiveShader.program); - + gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute); -} +}; PIXI.deactivatePrimitiveShader = function() { var gl = PIXI.gl; gl.useProgram(PIXI.defaultShader.program); - + gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); - -} +}; PIXI.activateStripShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.stripShader.program); // gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.deactivateStripShader = function() { @@ -68,7 +65,7 @@ gl.useProgram(PIXI.defaultShader.program); //gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; /* @@ -78,12 +75,12 @@ PIXI.CompileVertexShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); -} +}; PIXI.CompileFragmentShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); -} +}; PIXI._CompileShader = function(gl, shaderSrc, shaderType) { @@ -93,29 +90,28 @@ gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - console.log(gl.getShaderInfoLog(shader)); + window.console.log(gl.getShaderInfoLog(shader)); return null; } return shader; -} - +}; PIXI.compileProgram = function(vertexSrc, fragmentSrc) { var gl = PIXI.gl; var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); - - var shaderProgram = gl.createProgram(); - - gl.attachShader(shaderProgram, vertexShader); - gl.attachShader(shaderProgram, fragmentShader); - gl.linkProgram(shaderProgram); - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - console.log("Could not initialise shaders"); - } + var shaderProgram = gl.createProgram(); + + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + window.console.log("Could not initialise shaders"); + } return shaderProgram; -} +}; diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index 128c217..fb5fb8c 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * A Text Object will create a line(s) of text using bitmap font. To split a line you can use "\n", "\r" or "\r\n" + * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' * You can generate the fnt files using * http://www.angelcode.com/products/bmfont/ for windows or * http://www.bmglyph.com/ for mac. @@ -13,8 +13,8 @@ * @constructor * @param text {String} The copy that you would like the text to display * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText = function(text, style) { @@ -23,8 +23,7 @@ this.setText(text); this.setStyle(style); this.updateText(); - this.dirty = false - + this.dirty = false; }; // constructor @@ -39,7 +38,7 @@ */ PIXI.BitmapText.prototype.setText = function(text) { - this.text = text || " "; + this.text = text || ' '; this.dirty = true; }; @@ -48,16 +47,16 @@ * * @method setStyle * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText.prototype.setStyle = function(style) { style = style || {}; - style.align = style.align || "left"; + style.align = style.align || 'left'; this.style = style; - var font = style.font.split(" "); + var font = style.font.split(' '); this.fontName = font[font.length - 1]; this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; @@ -100,7 +99,7 @@ if(prevCharCode && charData[prevCharCode]) { - pos.x += charData.kerning[prevCharCode]; + pos.x += charData.kerning[prevCharCode]; } chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; @@ -115,11 +114,11 @@ for(i = 0; i <= line; i++) { var alignOffset = 0; - if(this.style.align == "right") + if(this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } @@ -128,7 +127,7 @@ for(i = 0; i < chars.length; i++) { - var c = new PIXI.Sprite(chars[i].texture)//PIXI.Sprite.fromFrame(chars[i].charCode); + var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode); c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; c.position.y = chars[i].position.y * scale; c.scale.x = c.scale.y = scale; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index f708d85..75d50d0 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -3,25 +3,25 @@ */ /** - * A Text Object will create a line(s) of text to split a line you can use "\n" + * A Text Object will create a line(s) of text to split a line you can use '\n' * * @class Text * @extends Sprite * @constructor * @param text {String} The copy that you would like the text to display * @param [style] {Object} The style parameters - * @param [style.font] {String} default "bold 20pt Arial" The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font] {String} default 'bold 20pt Arial' The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap */ PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - this.context = this.canvas.getContext("2d"); + this.canvas = document.createElement('canvas'); + this.context = this.canvas.getContext('2d'); PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); @@ -40,10 +40,10 @@ * * @method setStyle * @param [style] {Object} The style parameters - * @param [style.font="bold 20pt Arial"] {String} The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke="black"] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font='bold 20pt Arial'] {String} The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke='black'] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap @@ -51,10 +51,10 @@ PIXI.Text.prototype.setStyle = function(style) { style = style || {}; - style.font = style.font || "bold 20pt Arial"; - style.fill = style.fill || "black"; - style.align = style.align || "left"; - style.stroke = style.stroke || "black"; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 + style.font = style.font || 'bold 20pt Arial'; + style.fill = style.fill || 'black'; + style.align = style.align || 'left'; + style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 style.strokeThickness = style.strokeThickness || 0; style.wordWrap = style.wordWrap || false; style.wordWrapWidth = style.wordWrapWidth || 100; @@ -63,14 +63,14 @@ }; /** - * Set the copy for the text object. To split a line you can use "\n" + * Set the copy for the text object. To split a line you can use '\n' * * @method setText * @param {String} text The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { - this.text = text.toString() || " "; + this.text = text.toString() || ' '; this.dirty = true; }; @@ -105,7 +105,7 @@ this.canvas.width = maxLineWidth + this.style.strokeThickness; //calculate text height - var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + var lineHeight = this.determineFontHeight('font: ' + this.style.font + ';') + this.style.strokeThickness; this.canvas.height = lineHeight * lines.length; //set canvas text styles @@ -115,18 +115,18 @@ this.context.strokeStyle = this.style.stroke; this.context.lineWidth = this.style.strokeThickness; - this.context.textBaseline = "top"; + this.context.textBaseline = 'top'; //draw lines line by line for (i = 0; i < lines.length; i++) { var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); - if(this.style.align == "right") + if(this.style.align === 'right') { linePosition.x += maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { linePosition.x += (maxLineWidth - lineWidths[i]) / 2; } @@ -197,11 +197,11 @@ if(!result) { - var body = document.getElementsByTagName("body")[0]; - var dummy = document.createElement("div"); - var dummyText = document.createTextNode("M"); + var body = document.getElementsByTagName('body')[0]; + var dummy = document.createElement('div'); + var dummyText = document.createTextNode('M'); dummy.appendChild(dummyText); - dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0'); + dummy.setAttribute('style', fontStyle + ';position:absolute;top:0;left:0'); body.appendChild(dummy); result = dummy.offsetHeight; @@ -225,34 +225,34 @@ { // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. - var result = ""; - var lines = text.split("\n"); + var result = ''; + var lines = text.split('\n'); for (var i = 0; i < lines.length; i++) { var spaceLeft = this.style.wordWrapWidth; - var words = lines[i].split(" "); + var words = lines[i].split(' '); for (var j = 0; j < words.length; j++) { var wordWidth = this.context.measureText(words[j]).width; - var wordWidthWithSpace = wordWidth + this.context.measureText(" ").width; + var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if(wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is // greater than the word wrap width. if(j > 0) { - result += "\n"; + result += '\n'; } - result += words[j] + " "; + result += words[j] + ' '; spaceLeft = this.style.wordWrapWidth - wordWidth; } else { spaceLeft -= wordWidthWithSpace; - result += words[j] + " "; + result += words[j] + ' '; } } - result += "\n"; + result += '\n'; } return result; }; diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 6c9a83c..317e4e0 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -69,7 +69,7 @@ { var scope = this; - this.source.onload = function(){ + this.source.onload = function() { scope.hasLoaded = true; scope.width = scope.source.width; @@ -78,7 +78,7 @@ // add it to somewhere... PIXI.texturesToUpdate.push(scope); scope.dispatchEvent( { type: 'loaded', content: scope } ); - } + }; // this.image.src = imageUrl; } } @@ -93,7 +93,7 @@ this.imageUrl = null; this._powerOf2 = false; -} +}; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; @@ -106,17 +106,17 @@ { if(this.source instanceof Image) { - if (this.imageUrl in PIXI.BaseTextureCache) + if (this.imageUrl in PIXI.BaseTextureCache) delete PIXI.BaseTextureCache[this.imageUrl]; this.imageUrl = null; this.source.src = null; } this.source = null; PIXI.texturesToDestroy.push(this); -} +}; /** - * + * * * @method destroy */ @@ -126,7 +126,7 @@ this.hasLoaded = false; this.source.src = null; this.source.src = newSrc; -} +}; /** * Helper function that returns a base texture based on an image url @@ -156,4 +156,4 @@ } return baseTexture; -} +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderGroup.js b/src/pixi/renderers/webgl/WebGLRenderGroup.js index 990d9be..47d8b96 100644 --- a/src/pixi/renderers/webgl/WebGLRenderGroup.js +++ b/src/pixi/renderers/webgl/WebGLRenderGroup.js @@ -18,16 +18,16 @@ PIXI.WebGLRenderGroup = function(gl, transparent) { this.gl = gl; - this.root; - - this.backgroundColor; - this.transparent = transparent == undefined ? true : transparent; - + this.root = null; + + this.backgroundColor = undefined; + this.transparent = transparent === undefined ? true : transparent; + this.batchs = []; this.toRemove = []; - console.log(this.transparent) + //console.log(this.transparent); this.filterManager = new PIXI.WebGLFilterManager(this.transparent); -} +}; // constructor PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup; @@ -37,22 +37,22 @@ * * @method setRenderable * @param displayObject {DisplayObject} - * @private + * @private */ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); - + displayObject.worldVisible = displayObject.visible; - + // soooooo // // to check if any batchs exist already?? - + // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); -} +}; /** * Renders the stage to its webgl view @@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer) { PIXI.WebGLRenderer.updateTextures(); - + var gl = this.gl; gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y); this.filterManager.begin(projection, buffer); - + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // will render all the elements in the group var renderable; - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - + renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); continue; } - + // render special this.renderSpecial(renderable, projection); } - -} +}; /** * Renders a specific displayObject @@ -109,13 +108,16 @@ // to do! // render part of the scene... - + var startIndex; var startBatchIndex; - + var endIndex; var endBatchIndex; - + var endBatch; + + var head; + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -130,25 +132,24 @@ } var startBatch = nextRenderable.batch; //console.log(nextRenderable); - + //console.log(renderable) if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; - - var head = startBatch.head; - var next = head; - + + head = startBatch.head; + // ok now we have the batch.. need to find the start index! - if(head == nextRenderable) + if(head === nextRenderable) { startIndex = 0; } else { startIndex = 1; - - while(head.__next != nextRenderable) + + while(head.__next !== nextRenderable) { startIndex++; head = head.__next; @@ -159,7 +160,7 @@ { startBatch = nextRenderable; } - + // Get the LAST renderable object var lastRenderable = displayObject.last; while(lastRenderable._iPrev) @@ -167,22 +168,22 @@ if(lastRenderable.renderable && lastRenderable.__renderGroup)break; lastRenderable = lastRenderable._iNext; } - + if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; - - var head = endBatch.head; - - if(head == lastRenderable) + + head = endBatch.head; + + if(head === lastRenderable) { endIndex = 0; } else { endIndex = 1; - - while(head.__next != lastRenderable) + + while(head.__next !== lastRenderable) { endIndex++; head = head.__next; @@ -193,11 +194,11 @@ { endBatch = lastRenderable; } - + //console.log(endBatch); // TODO - need to fold this up a bit! - - if(startBatch == endBatch) + + if(startBatch === endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { @@ -209,11 +210,11 @@ } return; } - + // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); - + // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { @@ -223,12 +224,13 @@ { this.renderSpecial(startBatch, projection); } - + // DO the middle batchs.. - for (var i=startBatchIndex+1; i < endBatchIndex; i++) + var renderable; + for (var i = startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; - + if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); @@ -238,7 +240,7 @@ this.renderSpecial(renderable, projection); } } - + // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { @@ -248,7 +250,7 @@ { this.renderSpecial(endBatch, projection); } -} +}; /** * Renders a specific renderable @@ -260,8 +262,8 @@ */ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) { - - var worldVisible = renderable.vcount === PIXI.visibleCount + + var worldVisible = renderable.vcount === PIXI.visibleCount; if(renderable instanceof PIXI.TilingSprite) @@ -284,9 +286,8 @@ { this.handleFilterBlock(renderable, projection); } -} +}; -flip = false; var maskStack = []; var maskPosition = 0; @@ -298,30 +299,30 @@ * for now only masks are supported.. */ var gl = PIXI.gl; - + if(filterBlock.open) { if(filterBlock.data instanceof Array) { this.filterManager.pushFilter(filterBlock); // ok so.. - + } else - { + { maskPosition++; - maskStack.push(filterBlock) - + maskStack.push(filterBlock); + gl.enable(gl.STENCIL_TEST); - + gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - + PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -335,27 +336,26 @@ } else { - var maskData = maskStack.pop(filterBlock) - + var maskData = maskStack.pop(filterBlock); if(maskData) { gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); PIXI.WebGLGraphics.renderGraphics(maskData.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - }; + } gl.disable(gl.STENCIL_TEST); } } -} +}; /** * Updates a webgl texture @@ -366,23 +366,23 @@ */ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { - + // TODO definitely can optimse this function.. - + this.removeObject(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; - while(previousRenderable != this.root) + while(previousRenderable !== this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -395,9 +395,9 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - + this.insertObject(displayObject, previousRenderable, nextRenderable); -} +}; /** * Adds filter blocks @@ -417,13 +417,13 @@ * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -431,13 +431,13 @@ * scene graph */ var previousRenderable2 = end; - while(previousRenderable2 != this.root.first) + while(previousRenderable2 !== this.root.first) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); -} +}; /** * Remove filter blocks @@ -451,7 +451,7 @@ { this.removeObject(start); this.removeObject(end); -} +}; /** * Adds a display object and children to the webgl context @@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ - + var previousRenderable = displayObject.first; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -489,26 +489,27 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - - // one the display object hits this. we can break the loop - + + // one the display object hits this. we can break the loop + var tempObject = displayObject.first; var testObject = displayObject.last._iNext; - do + + do { tempObject.__renderGroup = this; - + if(tempObject.renderable) { - + this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } - + tempObject = tempObject._iNext; } - while(tempObject != testObject) -} + while(tempObject !== testObject); +}; /** * Removes a display object and children to the webgl context @@ -519,18 +520,16 @@ */ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { - if(displayObject.__renderGroup != this)return; - -// var displayObject = displayObject.first; - var lastObject = displayObject.last; - do + if(displayObject.__renderGroup !== this) return; + + do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } - while(displayObject) -} + while(displayObject); +}; /** * Inserts a displayObject into the linked list @@ -546,22 +545,23 @@ // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; - + var index, batch; + /* * so now we have the next renderable and the previous renderable - * + * */ if(displayObject instanceof PIXI.Sprite) { - var previousBatch - var nextBatch - + var previousBatch; + var nextBatch; + if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { - if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; @@ -573,40 +573,40 @@ // TODO reword! previousBatch = previousSprite; } - + if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; - + //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { - if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { - if(nextBatch == previousBatch) + if(nextBatch === previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var batch = PIXI.WebGLRenderer.getBatch(); + batch = PIXI.WebGLRenderer.getBatch(); - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); - + return; } } @@ -615,39 +615,39 @@ else { // TODO re-word! - + nextBatch = nextSprite; } } - + /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ - - var batch = PIXI.WebGLRenderer.getBatch(); + + batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); - if(previousBatch) // if this is invalid it means + if(previousBatch) // if this is invalid it means { - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } - + return; } else if(displayObject instanceof PIXI.TilingSprite) { - + // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); - + } else if(displayObject instanceof PIXI.Strip) { @@ -655,20 +655,21 @@ this.initStrip(displayObject); // this.batchs.push(displayObject); } + /* else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); - + // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } - - this.insertAfter(displayObject, previousSprite); - - // insert and SPLIT! + */ -} + this.insertAfter(displayObject, previousSprite); + + // insert and SPLIT! +}; /** * Inserts a displayObject into the linked list @@ -680,36 +681,38 @@ */ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { + var index; + if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; - + if(previousBatch) { // so this object is in a batch! - + // is it not? need to split the batch - if(previousBatch.tail == displayObject) + if(previousBatch.tail === displayObject) { - // is it tail? insert in to batchs - var index = this.batchs.indexOf( previousBatch ); + // is it tail? insert in to batchs + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // - + // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); - + // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } @@ -720,10 +723,10 @@ } else { - var index = this.batchs.indexOf( displayObject ); + index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } -} +}; /** * Removes a displayObject from the linked list @@ -736,26 +739,26 @@ { // loop through children.. // display object // - + // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. - * + * */ var batchToRemove; - + if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering - + batch.remove(displayObject); - - if(batch.size==0) + + if(batch.size === 0) { batchToRemove = batch; } @@ -764,44 +767,44 @@ { batchToRemove = displayObject; } - + /* * Looks like there is somthing that needs removing! */ - if(batchToRemove) + if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); - if(index == -1)return;// this means it was added then removed before rendered - + if(index === -1)return;// this means it was added then removed before rendered + // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? - if(index == 0 || index == this.batchs.length-1) + if(index === 0 || index === this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); - + return; } - + if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { - if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) + if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); - + if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } - + this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } -} +}; /** @@ -816,26 +819,26 @@ var gl = this.gl; // make the texture tilable.. - + sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); - + sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); - + sprite.colors = new Float32Array([1,1,1,1]); - - sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); - + + sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]); + sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); @@ -847,7 +850,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); - + // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) @@ -861,7 +864,7 @@ { sprite.texture.baseTexture._powerOf2 = true; } -} +}; /** * Renders a Strip @@ -879,18 +882,16 @@ var shader = PIXI.stripShader; - var program = shader.program; - var m = PIXI.mat3.clone(strip.worldTransform); - + PIXI.mat3.transpose(m); - + // console.log(projection) - // set the matrix transform for the + // set the matrix transform for the gl.uniformMatrix3fv(shader.translationMatrix, false, m); gl.uniform2f(shader.projectionVector, projection.x, projection.y); gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(shader.alpha, strip.worldAlpha); /* @@ -903,24 +904,24 @@ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ - + //console.log("!!") if(!strip.dirty) - { + { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } @@ -928,32 +929,32 @@ { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); // console.log(strip.texture.baseTexture._glTexture) gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); - + } - + gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); - + PIXI.deactivateStripShader(); //gl.useProgram(PIXI.currentProgram); -} +}; /** * Renders a TilingSprite @@ -967,35 +968,32 @@ { var gl = this.gl; - - var shaderProgram = PIXI.shaderProgram; - var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; - + var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; - + sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; - + sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; - + sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs); + this.renderStrip(sprite, projectionMatrix); -} +}; /** * Initializes a strip to be rendered @@ -1008,13 +1006,12 @@ { // build the strip! var gl = this.gl; - var shaderProgram = this.shaderProgram; - + strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); @@ -1024,8 +1021,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); -} - +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 9b5e703..1acec35 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -6,7 +6,7 @@ // an instance of the gl context.. // only one at the moment :/ -PIXI.gl; +PIXI.gl = null; /** * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer @@ -21,7 +21,7 @@ * @param view {Canvas} the canvas to use as a view, optional * @param transparent=false {Boolean} the transparency of the render view, default false * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * + * */ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) { @@ -32,14 +32,14 @@ this.width = width || 800; this.height = height || 600; - this.view = view || document.createElement( 'canvas' ); + this.view = view || document.createElement( 'canvas' ); this.view.width = this.width; this.view.height = this.height; - // deal with losing context.. + // deal with losing context.. var scope = this; - this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) - this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) + this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false); + this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false); this.batchs = []; @@ -48,30 +48,30 @@ antialias:!!antialias, // SPEED UP?? premultipliedAlpha:false, stencil:true - } + }; //try 'experimental-webgl' try { - PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options); + PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options); } catch (e) { //try 'webgl' try { - PIXI.gl = this.gl = this.view.getContext("webgl", options); - } catch (e) { + PIXI.gl = this.gl = this.view.getContext('webgl', options); + } catch (e2) { // fail, not able to get a context - throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); + throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); } } PIXI.initDefaultShaders(); - - + + // PIXI.activateDefaultShader(); var gl = this.gl; - + gl.useProgram(PIXI.defaultShader.program); @@ -82,7 +82,7 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); - gl.colorMask(true, true, true, this.transparent); + gl.colorMask(true, true, true, this.transparent); PIXI.projection = new PIXI.Point(400, 300); PIXI.offset = new PIXI.Point(0, 0); @@ -96,7 +96,7 @@ this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent); // this.stageRenderGroup. = this.transparent -} +}; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; @@ -107,11 +107,11 @@ * @static * @method getBatch * @return {WebGLBatch} - * @private + * @private */ PIXI.WebGLRenderer.getBatch = function() { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); } @@ -119,7 +119,7 @@ { return PIXI._batchs.pop(); } -} +}; /** * Puts a batch back into the pool @@ -131,9 +131,9 @@ */ PIXI.WebGLRenderer.returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * Renders the stage to its webGL view @@ -144,8 +144,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage) { if(this.contextLost)return; - - + + // if rendering a new stage clear the batchs.. if(this.__stage !== stage) { @@ -155,33 +155,33 @@ this.stageRenderGroup.setRenderable(stage); } - // update any textures + // update any textures PIXI.WebGLRenderer.updateTextures(); - - // update the scene graph + + // update the scene graph PIXI.visibleCount++; stage.updateTransform(); - + var gl = this.gl; - + // -- Does this need to be set every frame? -- // - gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - + gl.colorMask(true, true, true, this.transparent); + gl.viewport(0, 0, this.width, this.height); + gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); + + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); // HACK TO TEST - + this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; - + PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + this.stageRenderGroup.render(PIXI.projection); - + // interaction // run interaction! if(stage.interactive) @@ -193,18 +193,18 @@ stage.interactionManager.setTarget(this); } } - + // after rendering lets confirm all frames that have been uodated.. if(PIXI.Texture.frameUpdates.length > 0) { - for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) + for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) { PIXI.Texture.frameUpdates[i].updateFrame = false; - }; - + } + PIXI.Texture.frameUpdates = []; } -} +}; /** * Updates the textures loaded into this webgl renderer @@ -215,12 +215,18 @@ */ PIXI.WebGLRenderer.updateTextures = function() { + var i = 0; + //TODO break this out into a texture manager... - for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); - for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + for (i = 0; i < PIXI.texturesToUpdate.length; i++) + PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); + + for (i = 0; i < PIXI.texturesToDestroy.length; i++) + PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; -} +}; /** * Updates a loaded webgl texture @@ -234,7 +240,7 @@ { //TODO break this out into a texture manager... var gl = PIXI.gl; - + if(!texture._glTexture) { texture._glTexture = gl.createTexture(); @@ -264,7 +270,7 @@ gl.bindTexture(gl.TEXTURE_2D, null); } -} +}; /** * Destroys a loaded webgl texture @@ -283,7 +289,7 @@ texture._glTexture = gl.createTexture(); gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture); } -} +}; /** * resizes the webGL view to the specified width and height @@ -300,13 +306,13 @@ this.view.width = width; this.view.height = height; - this.gl.viewport(0, 0, this.width, this.height); + this.gl.viewport(0, 0, this.width, this.height); //var projectionMatrix = this.projectionMatrix; PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + //PIXI.size.x = this.width/2; //PIXI.size.y = -this.height/2; @@ -314,7 +320,7 @@ // projectionMatrix[5] = -2/this.height; // projectionMatrix[12] = -1; // projectionMatrix[13] = 1; -} +}; /** * Handles a lost webgl context @@ -327,7 +333,7 @@ { event.preventDefault(); this.contextLost = true; -} +}; /** * Handles a restored webgl context @@ -336,28 +342,28 @@ * @param event {Event} * @private */ -PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) +PIXI.WebGLRenderer.prototype.handleContextRestored = function() { - this.gl = this.view.getContext("experimental-webgl", { + this.gl = this.view.getContext('experimental-webgl', { alpha: true }); - this.initShaders(); + this.initShaders(); - for(var key in PIXI.TextureCache) + for(var key in PIXI.TextureCache) { - var texture = PIXI.TextureCache[key].baseTexture; - texture._glTexture = null; - PIXI.WebGLRenderer.updateTexture(texture); - }; + var texture = PIXI.TextureCache[key].baseTexture; + texture._glTexture = null; + PIXI.WebGLRenderer.updateTexture(texture); + } - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - this.batchs[i].restoreLostContext(this.gl)// + this.batchs[i].restoreLostContext(this.gl); this.batchs[i].dirty = true; - }; + } PIXI._restoreBatchs(this.gl); this.contextLost = false; -} +}; diff --git a/src/pixi/renderers/webgl/WebGLShaders.js b/src/pixi/renderers/webgl/WebGLShaders.js index 016d37c..b6b66b7 100644 --- a/src/pixi/renderers/webgl/WebGLShaders.js +++ b/src/pixi/renderers/webgl/WebGLShaders.js @@ -2,8 +2,7 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - -PIXI.initDefaultShaders = function() +PIXI.initDefaultShaders = function() { PIXI.primitiveShader = new PIXI.PrimitiveShader(); PIXI.primitiveShader.init(); @@ -14,53 +13,51 @@ PIXI.defaultShader = new PIXI.PixiShader(); PIXI.defaultShader.init(); - var gl = PIXI.gl; + var gl = PIXI.gl; var shaderProgram = PIXI.defaultShader.program; - gl.useProgram(shaderProgram); - + gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.activatePrimitiveShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.primitiveShader.program); - + gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute); -} +}; PIXI.deactivatePrimitiveShader = function() { var gl = PIXI.gl; gl.useProgram(PIXI.defaultShader.program); - + gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); - -} +}; PIXI.activateStripShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.stripShader.program); // gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.deactivateStripShader = function() { @@ -68,7 +65,7 @@ gl.useProgram(PIXI.defaultShader.program); //gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; /* @@ -78,12 +75,12 @@ PIXI.CompileVertexShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); -} +}; PIXI.CompileFragmentShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); -} +}; PIXI._CompileShader = function(gl, shaderSrc, shaderType) { @@ -93,29 +90,28 @@ gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - console.log(gl.getShaderInfoLog(shader)); + window.console.log(gl.getShaderInfoLog(shader)); return null; } return shader; -} - +}; PIXI.compileProgram = function(vertexSrc, fragmentSrc) { var gl = PIXI.gl; var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); - - var shaderProgram = gl.createProgram(); - - gl.attachShader(shaderProgram, vertexShader); - gl.attachShader(shaderProgram, fragmentShader); - gl.linkProgram(shaderProgram); - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - console.log("Could not initialise shaders"); - } + var shaderProgram = gl.createProgram(); + + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + window.console.log("Could not initialise shaders"); + } return shaderProgram; -} +}; diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index 128c217..fb5fb8c 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * A Text Object will create a line(s) of text using bitmap font. To split a line you can use "\n", "\r" or "\r\n" + * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' * You can generate the fnt files using * http://www.angelcode.com/products/bmfont/ for windows or * http://www.bmglyph.com/ for mac. @@ -13,8 +13,8 @@ * @constructor * @param text {String} The copy that you would like the text to display * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText = function(text, style) { @@ -23,8 +23,7 @@ this.setText(text); this.setStyle(style); this.updateText(); - this.dirty = false - + this.dirty = false; }; // constructor @@ -39,7 +38,7 @@ */ PIXI.BitmapText.prototype.setText = function(text) { - this.text = text || " "; + this.text = text || ' '; this.dirty = true; }; @@ -48,16 +47,16 @@ * * @method setStyle * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText.prototype.setStyle = function(style) { style = style || {}; - style.align = style.align || "left"; + style.align = style.align || 'left'; this.style = style; - var font = style.font.split(" "); + var font = style.font.split(' '); this.fontName = font[font.length - 1]; this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; @@ -100,7 +99,7 @@ if(prevCharCode && charData[prevCharCode]) { - pos.x += charData.kerning[prevCharCode]; + pos.x += charData.kerning[prevCharCode]; } chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; @@ -115,11 +114,11 @@ for(i = 0; i <= line; i++) { var alignOffset = 0; - if(this.style.align == "right") + if(this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } @@ -128,7 +127,7 @@ for(i = 0; i < chars.length; i++) { - var c = new PIXI.Sprite(chars[i].texture)//PIXI.Sprite.fromFrame(chars[i].charCode); + var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode); c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; c.position.y = chars[i].position.y * scale; c.scale.x = c.scale.y = scale; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index f708d85..75d50d0 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -3,25 +3,25 @@ */ /** - * A Text Object will create a line(s) of text to split a line you can use "\n" + * A Text Object will create a line(s) of text to split a line you can use '\n' * * @class Text * @extends Sprite * @constructor * @param text {String} The copy that you would like the text to display * @param [style] {Object} The style parameters - * @param [style.font] {String} default "bold 20pt Arial" The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font] {String} default 'bold 20pt Arial' The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap */ PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - this.context = this.canvas.getContext("2d"); + this.canvas = document.createElement('canvas'); + this.context = this.canvas.getContext('2d'); PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); @@ -40,10 +40,10 @@ * * @method setStyle * @param [style] {Object} The style parameters - * @param [style.font="bold 20pt Arial"] {String} The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke="black"] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font='bold 20pt Arial'] {String} The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke='black'] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap @@ -51,10 +51,10 @@ PIXI.Text.prototype.setStyle = function(style) { style = style || {}; - style.font = style.font || "bold 20pt Arial"; - style.fill = style.fill || "black"; - style.align = style.align || "left"; - style.stroke = style.stroke || "black"; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 + style.font = style.font || 'bold 20pt Arial'; + style.fill = style.fill || 'black'; + style.align = style.align || 'left'; + style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 style.strokeThickness = style.strokeThickness || 0; style.wordWrap = style.wordWrap || false; style.wordWrapWidth = style.wordWrapWidth || 100; @@ -63,14 +63,14 @@ }; /** - * Set the copy for the text object. To split a line you can use "\n" + * Set the copy for the text object. To split a line you can use '\n' * * @method setText * @param {String} text The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { - this.text = text.toString() || " "; + this.text = text.toString() || ' '; this.dirty = true; }; @@ -105,7 +105,7 @@ this.canvas.width = maxLineWidth + this.style.strokeThickness; //calculate text height - var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + var lineHeight = this.determineFontHeight('font: ' + this.style.font + ';') + this.style.strokeThickness; this.canvas.height = lineHeight * lines.length; //set canvas text styles @@ -115,18 +115,18 @@ this.context.strokeStyle = this.style.stroke; this.context.lineWidth = this.style.strokeThickness; - this.context.textBaseline = "top"; + this.context.textBaseline = 'top'; //draw lines line by line for (i = 0; i < lines.length; i++) { var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); - if(this.style.align == "right") + if(this.style.align === 'right') { linePosition.x += maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { linePosition.x += (maxLineWidth - lineWidths[i]) / 2; } @@ -197,11 +197,11 @@ if(!result) { - var body = document.getElementsByTagName("body")[0]; - var dummy = document.createElement("div"); - var dummyText = document.createTextNode("M"); + var body = document.getElementsByTagName('body')[0]; + var dummy = document.createElement('div'); + var dummyText = document.createTextNode('M'); dummy.appendChild(dummyText); - dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0'); + dummy.setAttribute('style', fontStyle + ';position:absolute;top:0;left:0'); body.appendChild(dummy); result = dummy.offsetHeight; @@ -225,34 +225,34 @@ { // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. - var result = ""; - var lines = text.split("\n"); + var result = ''; + var lines = text.split('\n'); for (var i = 0; i < lines.length; i++) { var spaceLeft = this.style.wordWrapWidth; - var words = lines[i].split(" "); + var words = lines[i].split(' '); for (var j = 0; j < words.length; j++) { var wordWidth = this.context.measureText(words[j]).width; - var wordWidthWithSpace = wordWidth + this.context.measureText(" ").width; + var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if(wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is // greater than the word wrap width. if(j > 0) { - result += "\n"; + result += '\n'; } - result += words[j] + " "; + result += words[j] + ' '; spaceLeft = this.style.wordWrapWidth - wordWidth; } else { spaceLeft -= wordWidthWithSpace; - result += words[j] + " "; + result += words[j] + ' '; } } - result += "\n"; + result += '\n'; } return result; }; diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 6c9a83c..317e4e0 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -69,7 +69,7 @@ { var scope = this; - this.source.onload = function(){ + this.source.onload = function() { scope.hasLoaded = true; scope.width = scope.source.width; @@ -78,7 +78,7 @@ // add it to somewhere... PIXI.texturesToUpdate.push(scope); scope.dispatchEvent( { type: 'loaded', content: scope } ); - } + }; // this.image.src = imageUrl; } } @@ -93,7 +93,7 @@ this.imageUrl = null; this._powerOf2 = false; -} +}; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; @@ -106,17 +106,17 @@ { if(this.source instanceof Image) { - if (this.imageUrl in PIXI.BaseTextureCache) + if (this.imageUrl in PIXI.BaseTextureCache) delete PIXI.BaseTextureCache[this.imageUrl]; this.imageUrl = null; this.source.src = null; } this.source = null; PIXI.texturesToDestroy.push(this); -} +}; /** - * + * * * @method destroy */ @@ -126,7 +126,7 @@ this.hasLoaded = false; this.source.src = null; this.source.src = newSrc; -} +}; /** * Helper function that returns a base texture based on an image url @@ -156,4 +156,4 @@ } return baseTexture; -} +}; diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index c7451df..fe1df38 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -5,11 +5,11 @@ /** A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. - __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded. - Otherwise black rectangles will be drawn instead. - + __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded. + Otherwise black rectangles will be drawn instead. + RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example: - + var renderTexture = new PIXI.RenderTexture(800, 600); var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); sprite.position.x = 800/2; @@ -39,7 +39,7 @@ this.indetityMatrix = PIXI.mat3.create(); - this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); + this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); if(PIXI.gl) { @@ -49,7 +49,7 @@ { this.initCanvas(); } -} +}; PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype ); PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; @@ -68,7 +68,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); this.glFramebuffer.width = this.width; - this.glFramebuffer.height = this.height; + this.glFramebuffer.height = this.height; this.baseTexture = new PIXI.BaseTexture(); @@ -95,7 +95,7 @@ // set the correct render function.. this.render = this.renderWebGL; -} +}; PIXI.RenderTexture.prototype.resize = function(width, height) @@ -103,24 +103,24 @@ this.width = width; this.height = height; - + if(PIXI.gl) { - this.projection.x = this.width/2 - this.projection.y = -this.height/2; - + this.projection.x = this.width / 2; + this.projection.y = -this.height / 2; + var gl = PIXI.gl; gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); } else { - - this.frame.width = this.width + + this.frame.width = this.width; this.frame.height = this.height; this.renderer.resize(this.width, this.height); } -} +}; /** * Initializes the canvas data for this texture @@ -136,7 +136,7 @@ this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); this.render = this.renderCanvas; -} +}; /** * This function will draw the display object to the texture. @@ -151,15 +151,15 @@ var gl = PIXI.gl; // enable the alpha color mask.. - gl.colorMask(true, true, true, true); + gl.colorMask(true, true, true, true); - gl.viewport(0, 0, this.width, this.height); + gl.viewport(0, 0, this.width, this.height); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); if(clear) { - gl.clearColor(0,0,0, 0); + gl.clearColor(0,0,0, 0); gl.clear(gl.COLOR_BUFFER_BIT); } @@ -178,20 +178,20 @@ displayObject.worldTransform[2] = position.x; displayObject.worldTransform[5] -= position.y; } - + PIXI.visibleCount++; displayObject.vcount = PIXI.visibleCount; - + for(var i=0,j=children.length; i/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderGroup.js b/src/pixi/renderers/webgl/WebGLRenderGroup.js index 990d9be..47d8b96 100644 --- a/src/pixi/renderers/webgl/WebGLRenderGroup.js +++ b/src/pixi/renderers/webgl/WebGLRenderGroup.js @@ -18,16 +18,16 @@ PIXI.WebGLRenderGroup = function(gl, transparent) { this.gl = gl; - this.root; - - this.backgroundColor; - this.transparent = transparent == undefined ? true : transparent; - + this.root = null; + + this.backgroundColor = undefined; + this.transparent = transparent === undefined ? true : transparent; + this.batchs = []; this.toRemove = []; - console.log(this.transparent) + //console.log(this.transparent); this.filterManager = new PIXI.WebGLFilterManager(this.transparent); -} +}; // constructor PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup; @@ -37,22 +37,22 @@ * * @method setRenderable * @param displayObject {DisplayObject} - * @private + * @private */ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); - + displayObject.worldVisible = displayObject.visible; - + // soooooo // // to check if any batchs exist already?? - + // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); -} +}; /** * Renders the stage to its webgl view @@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer) { PIXI.WebGLRenderer.updateTextures(); - + var gl = this.gl; gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y); this.filterManager.begin(projection, buffer); - + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // will render all the elements in the group var renderable; - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - + renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); continue; } - + // render special this.renderSpecial(renderable, projection); } - -} +}; /** * Renders a specific displayObject @@ -109,13 +108,16 @@ // to do! // render part of the scene... - + var startIndex; var startBatchIndex; - + var endIndex; var endBatchIndex; - + var endBatch; + + var head; + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -130,25 +132,24 @@ } var startBatch = nextRenderable.batch; //console.log(nextRenderable); - + //console.log(renderable) if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; - - var head = startBatch.head; - var next = head; - + + head = startBatch.head; + // ok now we have the batch.. need to find the start index! - if(head == nextRenderable) + if(head === nextRenderable) { startIndex = 0; } else { startIndex = 1; - - while(head.__next != nextRenderable) + + while(head.__next !== nextRenderable) { startIndex++; head = head.__next; @@ -159,7 +160,7 @@ { startBatch = nextRenderable; } - + // Get the LAST renderable object var lastRenderable = displayObject.last; while(lastRenderable._iPrev) @@ -167,22 +168,22 @@ if(lastRenderable.renderable && lastRenderable.__renderGroup)break; lastRenderable = lastRenderable._iNext; } - + if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; - - var head = endBatch.head; - - if(head == lastRenderable) + + head = endBatch.head; + + if(head === lastRenderable) { endIndex = 0; } else { endIndex = 1; - - while(head.__next != lastRenderable) + + while(head.__next !== lastRenderable) { endIndex++; head = head.__next; @@ -193,11 +194,11 @@ { endBatch = lastRenderable; } - + //console.log(endBatch); // TODO - need to fold this up a bit! - - if(startBatch == endBatch) + + if(startBatch === endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { @@ -209,11 +210,11 @@ } return; } - + // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); - + // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { @@ -223,12 +224,13 @@ { this.renderSpecial(startBatch, projection); } - + // DO the middle batchs.. - for (var i=startBatchIndex+1; i < endBatchIndex; i++) + var renderable; + for (var i = startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; - + if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); @@ -238,7 +240,7 @@ this.renderSpecial(renderable, projection); } } - + // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { @@ -248,7 +250,7 @@ { this.renderSpecial(endBatch, projection); } -} +}; /** * Renders a specific renderable @@ -260,8 +262,8 @@ */ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) { - - var worldVisible = renderable.vcount === PIXI.visibleCount + + var worldVisible = renderable.vcount === PIXI.visibleCount; if(renderable instanceof PIXI.TilingSprite) @@ -284,9 +286,8 @@ { this.handleFilterBlock(renderable, projection); } -} +}; -flip = false; var maskStack = []; var maskPosition = 0; @@ -298,30 +299,30 @@ * for now only masks are supported.. */ var gl = PIXI.gl; - + if(filterBlock.open) { if(filterBlock.data instanceof Array) { this.filterManager.pushFilter(filterBlock); // ok so.. - + } else - { + { maskPosition++; - maskStack.push(filterBlock) - + maskStack.push(filterBlock); + gl.enable(gl.STENCIL_TEST); - + gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - + PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -335,27 +336,26 @@ } else { - var maskData = maskStack.pop(filterBlock) - + var maskData = maskStack.pop(filterBlock); if(maskData) { gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); PIXI.WebGLGraphics.renderGraphics(maskData.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - }; + } gl.disable(gl.STENCIL_TEST); } } -} +}; /** * Updates a webgl texture @@ -366,23 +366,23 @@ */ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { - + // TODO definitely can optimse this function.. - + this.removeObject(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; - while(previousRenderable != this.root) + while(previousRenderable !== this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -395,9 +395,9 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - + this.insertObject(displayObject, previousRenderable, nextRenderable); -} +}; /** * Adds filter blocks @@ -417,13 +417,13 @@ * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -431,13 +431,13 @@ * scene graph */ var previousRenderable2 = end; - while(previousRenderable2 != this.root.first) + while(previousRenderable2 !== this.root.first) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); -} +}; /** * Remove filter blocks @@ -451,7 +451,7 @@ { this.removeObject(start); this.removeObject(end); -} +}; /** * Adds a display object and children to the webgl context @@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ - + var previousRenderable = displayObject.first; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -489,26 +489,27 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - - // one the display object hits this. we can break the loop - + + // one the display object hits this. we can break the loop + var tempObject = displayObject.first; var testObject = displayObject.last._iNext; - do + + do { tempObject.__renderGroup = this; - + if(tempObject.renderable) { - + this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } - + tempObject = tempObject._iNext; } - while(tempObject != testObject) -} + while(tempObject !== testObject); +}; /** * Removes a display object and children to the webgl context @@ -519,18 +520,16 @@ */ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { - if(displayObject.__renderGroup != this)return; - -// var displayObject = displayObject.first; - var lastObject = displayObject.last; - do + if(displayObject.__renderGroup !== this) return; + + do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } - while(displayObject) -} + while(displayObject); +}; /** * Inserts a displayObject into the linked list @@ -546,22 +545,23 @@ // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; - + var index, batch; + /* * so now we have the next renderable and the previous renderable - * + * */ if(displayObject instanceof PIXI.Sprite) { - var previousBatch - var nextBatch - + var previousBatch; + var nextBatch; + if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { - if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; @@ -573,40 +573,40 @@ // TODO reword! previousBatch = previousSprite; } - + if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; - + //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { - if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { - if(nextBatch == previousBatch) + if(nextBatch === previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var batch = PIXI.WebGLRenderer.getBatch(); + batch = PIXI.WebGLRenderer.getBatch(); - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); - + return; } } @@ -615,39 +615,39 @@ else { // TODO re-word! - + nextBatch = nextSprite; } } - + /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ - - var batch = PIXI.WebGLRenderer.getBatch(); + + batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); - if(previousBatch) // if this is invalid it means + if(previousBatch) // if this is invalid it means { - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } - + return; } else if(displayObject instanceof PIXI.TilingSprite) { - + // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); - + } else if(displayObject instanceof PIXI.Strip) { @@ -655,20 +655,21 @@ this.initStrip(displayObject); // this.batchs.push(displayObject); } + /* else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); - + // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } - - this.insertAfter(displayObject, previousSprite); - - // insert and SPLIT! + */ -} + this.insertAfter(displayObject, previousSprite); + + // insert and SPLIT! +}; /** * Inserts a displayObject into the linked list @@ -680,36 +681,38 @@ */ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { + var index; + if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; - + if(previousBatch) { // so this object is in a batch! - + // is it not? need to split the batch - if(previousBatch.tail == displayObject) + if(previousBatch.tail === displayObject) { - // is it tail? insert in to batchs - var index = this.batchs.indexOf( previousBatch ); + // is it tail? insert in to batchs + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // - + // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); - + // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } @@ -720,10 +723,10 @@ } else { - var index = this.batchs.indexOf( displayObject ); + index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } -} +}; /** * Removes a displayObject from the linked list @@ -736,26 +739,26 @@ { // loop through children.. // display object // - + // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. - * + * */ var batchToRemove; - + if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering - + batch.remove(displayObject); - - if(batch.size==0) + + if(batch.size === 0) { batchToRemove = batch; } @@ -764,44 +767,44 @@ { batchToRemove = displayObject; } - + /* * Looks like there is somthing that needs removing! */ - if(batchToRemove) + if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); - if(index == -1)return;// this means it was added then removed before rendered - + if(index === -1)return;// this means it was added then removed before rendered + // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? - if(index == 0 || index == this.batchs.length-1) + if(index === 0 || index === this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); - + return; } - + if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { - if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) + if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); - + if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } - + this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } -} +}; /** @@ -816,26 +819,26 @@ var gl = this.gl; // make the texture tilable.. - + sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); - + sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); - + sprite.colors = new Float32Array([1,1,1,1]); - - sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); - + + sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]); + sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); @@ -847,7 +850,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); - + // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) @@ -861,7 +864,7 @@ { sprite.texture.baseTexture._powerOf2 = true; } -} +}; /** * Renders a Strip @@ -879,18 +882,16 @@ var shader = PIXI.stripShader; - var program = shader.program; - var m = PIXI.mat3.clone(strip.worldTransform); - + PIXI.mat3.transpose(m); - + // console.log(projection) - // set the matrix transform for the + // set the matrix transform for the gl.uniformMatrix3fv(shader.translationMatrix, false, m); gl.uniform2f(shader.projectionVector, projection.x, projection.y); gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(shader.alpha, strip.worldAlpha); /* @@ -903,24 +904,24 @@ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ - + //console.log("!!") if(!strip.dirty) - { + { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } @@ -928,32 +929,32 @@ { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); // console.log(strip.texture.baseTexture._glTexture) gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); - + } - + gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); - + PIXI.deactivateStripShader(); //gl.useProgram(PIXI.currentProgram); -} +}; /** * Renders a TilingSprite @@ -967,35 +968,32 @@ { var gl = this.gl; - - var shaderProgram = PIXI.shaderProgram; - var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; - + var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; - + sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; - + sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; - + sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs); + this.renderStrip(sprite, projectionMatrix); -} +}; /** * Initializes a strip to be rendered @@ -1008,13 +1006,12 @@ { // build the strip! var gl = this.gl; - var shaderProgram = this.shaderProgram; - + strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); @@ -1024,8 +1021,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); -} - +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 9b5e703..1acec35 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -6,7 +6,7 @@ // an instance of the gl context.. // only one at the moment :/ -PIXI.gl; +PIXI.gl = null; /** * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer @@ -21,7 +21,7 @@ * @param view {Canvas} the canvas to use as a view, optional * @param transparent=false {Boolean} the transparency of the render view, default false * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * + * */ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) { @@ -32,14 +32,14 @@ this.width = width || 800; this.height = height || 600; - this.view = view || document.createElement( 'canvas' ); + this.view = view || document.createElement( 'canvas' ); this.view.width = this.width; this.view.height = this.height; - // deal with losing context.. + // deal with losing context.. var scope = this; - this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) - this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) + this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false); + this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false); this.batchs = []; @@ -48,30 +48,30 @@ antialias:!!antialias, // SPEED UP?? premultipliedAlpha:false, stencil:true - } + }; //try 'experimental-webgl' try { - PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options); + PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options); } catch (e) { //try 'webgl' try { - PIXI.gl = this.gl = this.view.getContext("webgl", options); - } catch (e) { + PIXI.gl = this.gl = this.view.getContext('webgl', options); + } catch (e2) { // fail, not able to get a context - throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); + throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); } } PIXI.initDefaultShaders(); - - + + // PIXI.activateDefaultShader(); var gl = this.gl; - + gl.useProgram(PIXI.defaultShader.program); @@ -82,7 +82,7 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); - gl.colorMask(true, true, true, this.transparent); + gl.colorMask(true, true, true, this.transparent); PIXI.projection = new PIXI.Point(400, 300); PIXI.offset = new PIXI.Point(0, 0); @@ -96,7 +96,7 @@ this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent); // this.stageRenderGroup. = this.transparent -} +}; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; @@ -107,11 +107,11 @@ * @static * @method getBatch * @return {WebGLBatch} - * @private + * @private */ PIXI.WebGLRenderer.getBatch = function() { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); } @@ -119,7 +119,7 @@ { return PIXI._batchs.pop(); } -} +}; /** * Puts a batch back into the pool @@ -131,9 +131,9 @@ */ PIXI.WebGLRenderer.returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * Renders the stage to its webGL view @@ -144,8 +144,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage) { if(this.contextLost)return; - - + + // if rendering a new stage clear the batchs.. if(this.__stage !== stage) { @@ -155,33 +155,33 @@ this.stageRenderGroup.setRenderable(stage); } - // update any textures + // update any textures PIXI.WebGLRenderer.updateTextures(); - - // update the scene graph + + // update the scene graph PIXI.visibleCount++; stage.updateTransform(); - + var gl = this.gl; - + // -- Does this need to be set every frame? -- // - gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - + gl.colorMask(true, true, true, this.transparent); + gl.viewport(0, 0, this.width, this.height); + gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); + + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); // HACK TO TEST - + this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; - + PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + this.stageRenderGroup.render(PIXI.projection); - + // interaction // run interaction! if(stage.interactive) @@ -193,18 +193,18 @@ stage.interactionManager.setTarget(this); } } - + // after rendering lets confirm all frames that have been uodated.. if(PIXI.Texture.frameUpdates.length > 0) { - for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) + for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) { PIXI.Texture.frameUpdates[i].updateFrame = false; - }; - + } + PIXI.Texture.frameUpdates = []; } -} +}; /** * Updates the textures loaded into this webgl renderer @@ -215,12 +215,18 @@ */ PIXI.WebGLRenderer.updateTextures = function() { + var i = 0; + //TODO break this out into a texture manager... - for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); - for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + for (i = 0; i < PIXI.texturesToUpdate.length; i++) + PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); + + for (i = 0; i < PIXI.texturesToDestroy.length; i++) + PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; -} +}; /** * Updates a loaded webgl texture @@ -234,7 +240,7 @@ { //TODO break this out into a texture manager... var gl = PIXI.gl; - + if(!texture._glTexture) { texture._glTexture = gl.createTexture(); @@ -264,7 +270,7 @@ gl.bindTexture(gl.TEXTURE_2D, null); } -} +}; /** * Destroys a loaded webgl texture @@ -283,7 +289,7 @@ texture._glTexture = gl.createTexture(); gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture); } -} +}; /** * resizes the webGL view to the specified width and height @@ -300,13 +306,13 @@ this.view.width = width; this.view.height = height; - this.gl.viewport(0, 0, this.width, this.height); + this.gl.viewport(0, 0, this.width, this.height); //var projectionMatrix = this.projectionMatrix; PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + //PIXI.size.x = this.width/2; //PIXI.size.y = -this.height/2; @@ -314,7 +320,7 @@ // projectionMatrix[5] = -2/this.height; // projectionMatrix[12] = -1; // projectionMatrix[13] = 1; -} +}; /** * Handles a lost webgl context @@ -327,7 +333,7 @@ { event.preventDefault(); this.contextLost = true; -} +}; /** * Handles a restored webgl context @@ -336,28 +342,28 @@ * @param event {Event} * @private */ -PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) +PIXI.WebGLRenderer.prototype.handleContextRestored = function() { - this.gl = this.view.getContext("experimental-webgl", { + this.gl = this.view.getContext('experimental-webgl', { alpha: true }); - this.initShaders(); + this.initShaders(); - for(var key in PIXI.TextureCache) + for(var key in PIXI.TextureCache) { - var texture = PIXI.TextureCache[key].baseTexture; - texture._glTexture = null; - PIXI.WebGLRenderer.updateTexture(texture); - }; + var texture = PIXI.TextureCache[key].baseTexture; + texture._glTexture = null; + PIXI.WebGLRenderer.updateTexture(texture); + } - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - this.batchs[i].restoreLostContext(this.gl)// + this.batchs[i].restoreLostContext(this.gl); this.batchs[i].dirty = true; - }; + } PIXI._restoreBatchs(this.gl); this.contextLost = false; -} +}; diff --git a/src/pixi/renderers/webgl/WebGLShaders.js b/src/pixi/renderers/webgl/WebGLShaders.js index 016d37c..b6b66b7 100644 --- a/src/pixi/renderers/webgl/WebGLShaders.js +++ b/src/pixi/renderers/webgl/WebGLShaders.js @@ -2,8 +2,7 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - -PIXI.initDefaultShaders = function() +PIXI.initDefaultShaders = function() { PIXI.primitiveShader = new PIXI.PrimitiveShader(); PIXI.primitiveShader.init(); @@ -14,53 +13,51 @@ PIXI.defaultShader = new PIXI.PixiShader(); PIXI.defaultShader.init(); - var gl = PIXI.gl; + var gl = PIXI.gl; var shaderProgram = PIXI.defaultShader.program; - gl.useProgram(shaderProgram); - + gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.activatePrimitiveShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.primitiveShader.program); - + gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute); -} +}; PIXI.deactivatePrimitiveShader = function() { var gl = PIXI.gl; gl.useProgram(PIXI.defaultShader.program); - + gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); - -} +}; PIXI.activateStripShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.stripShader.program); // gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.deactivateStripShader = function() { @@ -68,7 +65,7 @@ gl.useProgram(PIXI.defaultShader.program); //gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; /* @@ -78,12 +75,12 @@ PIXI.CompileVertexShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); -} +}; PIXI.CompileFragmentShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); -} +}; PIXI._CompileShader = function(gl, shaderSrc, shaderType) { @@ -93,29 +90,28 @@ gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - console.log(gl.getShaderInfoLog(shader)); + window.console.log(gl.getShaderInfoLog(shader)); return null; } return shader; -} - +}; PIXI.compileProgram = function(vertexSrc, fragmentSrc) { var gl = PIXI.gl; var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); - - var shaderProgram = gl.createProgram(); - - gl.attachShader(shaderProgram, vertexShader); - gl.attachShader(shaderProgram, fragmentShader); - gl.linkProgram(shaderProgram); - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - console.log("Could not initialise shaders"); - } + var shaderProgram = gl.createProgram(); + + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + window.console.log("Could not initialise shaders"); + } return shaderProgram; -} +}; diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index 128c217..fb5fb8c 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * A Text Object will create a line(s) of text using bitmap font. To split a line you can use "\n", "\r" or "\r\n" + * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' * You can generate the fnt files using * http://www.angelcode.com/products/bmfont/ for windows or * http://www.bmglyph.com/ for mac. @@ -13,8 +13,8 @@ * @constructor * @param text {String} The copy that you would like the text to display * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText = function(text, style) { @@ -23,8 +23,7 @@ this.setText(text); this.setStyle(style); this.updateText(); - this.dirty = false - + this.dirty = false; }; // constructor @@ -39,7 +38,7 @@ */ PIXI.BitmapText.prototype.setText = function(text) { - this.text = text || " "; + this.text = text || ' '; this.dirty = true; }; @@ -48,16 +47,16 @@ * * @method setStyle * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText.prototype.setStyle = function(style) { style = style || {}; - style.align = style.align || "left"; + style.align = style.align || 'left'; this.style = style; - var font = style.font.split(" "); + var font = style.font.split(' '); this.fontName = font[font.length - 1]; this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; @@ -100,7 +99,7 @@ if(prevCharCode && charData[prevCharCode]) { - pos.x += charData.kerning[prevCharCode]; + pos.x += charData.kerning[prevCharCode]; } chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; @@ -115,11 +114,11 @@ for(i = 0; i <= line; i++) { var alignOffset = 0; - if(this.style.align == "right") + if(this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } @@ -128,7 +127,7 @@ for(i = 0; i < chars.length; i++) { - var c = new PIXI.Sprite(chars[i].texture)//PIXI.Sprite.fromFrame(chars[i].charCode); + var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode); c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; c.position.y = chars[i].position.y * scale; c.scale.x = c.scale.y = scale; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index f708d85..75d50d0 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -3,25 +3,25 @@ */ /** - * A Text Object will create a line(s) of text to split a line you can use "\n" + * A Text Object will create a line(s) of text to split a line you can use '\n' * * @class Text * @extends Sprite * @constructor * @param text {String} The copy that you would like the text to display * @param [style] {Object} The style parameters - * @param [style.font] {String} default "bold 20pt Arial" The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font] {String} default 'bold 20pt Arial' The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap */ PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - this.context = this.canvas.getContext("2d"); + this.canvas = document.createElement('canvas'); + this.context = this.canvas.getContext('2d'); PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); @@ -40,10 +40,10 @@ * * @method setStyle * @param [style] {Object} The style parameters - * @param [style.font="bold 20pt Arial"] {String} The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke="black"] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font='bold 20pt Arial'] {String} The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke='black'] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap @@ -51,10 +51,10 @@ PIXI.Text.prototype.setStyle = function(style) { style = style || {}; - style.font = style.font || "bold 20pt Arial"; - style.fill = style.fill || "black"; - style.align = style.align || "left"; - style.stroke = style.stroke || "black"; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 + style.font = style.font || 'bold 20pt Arial'; + style.fill = style.fill || 'black'; + style.align = style.align || 'left'; + style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 style.strokeThickness = style.strokeThickness || 0; style.wordWrap = style.wordWrap || false; style.wordWrapWidth = style.wordWrapWidth || 100; @@ -63,14 +63,14 @@ }; /** - * Set the copy for the text object. To split a line you can use "\n" + * Set the copy for the text object. To split a line you can use '\n' * * @method setText * @param {String} text The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { - this.text = text.toString() || " "; + this.text = text.toString() || ' '; this.dirty = true; }; @@ -105,7 +105,7 @@ this.canvas.width = maxLineWidth + this.style.strokeThickness; //calculate text height - var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + var lineHeight = this.determineFontHeight('font: ' + this.style.font + ';') + this.style.strokeThickness; this.canvas.height = lineHeight * lines.length; //set canvas text styles @@ -115,18 +115,18 @@ this.context.strokeStyle = this.style.stroke; this.context.lineWidth = this.style.strokeThickness; - this.context.textBaseline = "top"; + this.context.textBaseline = 'top'; //draw lines line by line for (i = 0; i < lines.length; i++) { var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); - if(this.style.align == "right") + if(this.style.align === 'right') { linePosition.x += maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { linePosition.x += (maxLineWidth - lineWidths[i]) / 2; } @@ -197,11 +197,11 @@ if(!result) { - var body = document.getElementsByTagName("body")[0]; - var dummy = document.createElement("div"); - var dummyText = document.createTextNode("M"); + var body = document.getElementsByTagName('body')[0]; + var dummy = document.createElement('div'); + var dummyText = document.createTextNode('M'); dummy.appendChild(dummyText); - dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0'); + dummy.setAttribute('style', fontStyle + ';position:absolute;top:0;left:0'); body.appendChild(dummy); result = dummy.offsetHeight; @@ -225,34 +225,34 @@ { // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. - var result = ""; - var lines = text.split("\n"); + var result = ''; + var lines = text.split('\n'); for (var i = 0; i < lines.length; i++) { var spaceLeft = this.style.wordWrapWidth; - var words = lines[i].split(" "); + var words = lines[i].split(' '); for (var j = 0; j < words.length; j++) { var wordWidth = this.context.measureText(words[j]).width; - var wordWidthWithSpace = wordWidth + this.context.measureText(" ").width; + var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if(wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is // greater than the word wrap width. if(j > 0) { - result += "\n"; + result += '\n'; } - result += words[j] + " "; + result += words[j] + ' '; spaceLeft = this.style.wordWrapWidth - wordWidth; } else { spaceLeft -= wordWidthWithSpace; - result += words[j] + " "; + result += words[j] + ' '; } } - result += "\n"; + result += '\n'; } return result; }; diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 6c9a83c..317e4e0 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -69,7 +69,7 @@ { var scope = this; - this.source.onload = function(){ + this.source.onload = function() { scope.hasLoaded = true; scope.width = scope.source.width; @@ -78,7 +78,7 @@ // add it to somewhere... PIXI.texturesToUpdate.push(scope); scope.dispatchEvent( { type: 'loaded', content: scope } ); - } + }; // this.image.src = imageUrl; } } @@ -93,7 +93,7 @@ this.imageUrl = null; this._powerOf2 = false; -} +}; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; @@ -106,17 +106,17 @@ { if(this.source instanceof Image) { - if (this.imageUrl in PIXI.BaseTextureCache) + if (this.imageUrl in PIXI.BaseTextureCache) delete PIXI.BaseTextureCache[this.imageUrl]; this.imageUrl = null; this.source.src = null; } this.source = null; PIXI.texturesToDestroy.push(this); -} +}; /** - * + * * * @method destroy */ @@ -126,7 +126,7 @@ this.hasLoaded = false; this.source.src = null; this.source.src = newSrc; -} +}; /** * Helper function that returns a base texture based on an image url @@ -156,4 +156,4 @@ } return baseTexture; -} +}; diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index c7451df..fe1df38 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -5,11 +5,11 @@ /** A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. - __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded. - Otherwise black rectangles will be drawn instead. - + __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded. + Otherwise black rectangles will be drawn instead. + RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example: - + var renderTexture = new PIXI.RenderTexture(800, 600); var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); sprite.position.x = 800/2; @@ -39,7 +39,7 @@ this.indetityMatrix = PIXI.mat3.create(); - this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); + this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); if(PIXI.gl) { @@ -49,7 +49,7 @@ { this.initCanvas(); } -} +}; PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype ); PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; @@ -68,7 +68,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); this.glFramebuffer.width = this.width; - this.glFramebuffer.height = this.height; + this.glFramebuffer.height = this.height; this.baseTexture = new PIXI.BaseTexture(); @@ -95,7 +95,7 @@ // set the correct render function.. this.render = this.renderWebGL; -} +}; PIXI.RenderTexture.prototype.resize = function(width, height) @@ -103,24 +103,24 @@ this.width = width; this.height = height; - + if(PIXI.gl) { - this.projection.x = this.width/2 - this.projection.y = -this.height/2; - + this.projection.x = this.width / 2; + this.projection.y = -this.height / 2; + var gl = PIXI.gl; gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); } else { - - this.frame.width = this.width + + this.frame.width = this.width; this.frame.height = this.height; this.renderer.resize(this.width, this.height); } -} +}; /** * Initializes the canvas data for this texture @@ -136,7 +136,7 @@ this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); this.render = this.renderCanvas; -} +}; /** * This function will draw the display object to the texture. @@ -151,15 +151,15 @@ var gl = PIXI.gl; // enable the alpha color mask.. - gl.colorMask(true, true, true, true); + gl.colorMask(true, true, true, true); - gl.viewport(0, 0, this.width, this.height); + gl.viewport(0, 0, this.width, this.height); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); if(clear) { - gl.clearColor(0,0,0, 0); + gl.clearColor(0,0,0, 0); gl.clear(gl.COLOR_BUFFER_BIT); } @@ -178,20 +178,20 @@ displayObject.worldTransform[2] = position.x; displayObject.worldTransform[5] -= position.y; } - + PIXI.visibleCount++; displayObject.vcount = PIXI.visibleCount; - + for(var i=0,j=children.length; i this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) { - throw new Error("Texture Error: frame does not fit inside the base Texture dimensions " + this); + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this); } this.updateFrame = true; PIXI.Texture.frameUpdates.push(this); //this.dispatchEvent( { type: 'update', content: this } ); -} +}; /** * Helper function that returns a texture based on an image url @@ -145,7 +145,7 @@ } return texture; -} +}; /** * Helper function that returns a texture based on a frame id @@ -159,9 +159,9 @@ PIXI.Texture.fromFrame = function(frameId) { var texture = PIXI.TextureCache[frameId]; - if(!texture)throw new Error("The frameId '"+ frameId +"' does not exist in the texture cache " + this); + if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache ' + this); return texture; -} +}; /** * Helper function that returns a texture based on a canvas element @@ -176,7 +176,7 @@ { var baseTexture = new PIXI.BaseTexture(canvas); return new PIXI.Texture(baseTexture); -} +}; /** @@ -190,7 +190,7 @@ PIXI.Texture.addTextureToCache = function(texture, id) { PIXI.TextureCache[id] = texture; -} +}; /** * Remove a texture from the textureCache. @@ -202,11 +202,10 @@ */ PIXI.Texture.removeTextureFromCache = function(id) { - var texture = PIXI.TextureCache[id] + var texture = PIXI.TextureCache[id]; PIXI.TextureCache[id] = null; return texture; -} +}; // this is more for webGL.. it contains updated frames.. PIXI.Texture.frameUpdates = []; - diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderGroup.js b/src/pixi/renderers/webgl/WebGLRenderGroup.js index 990d9be..47d8b96 100644 --- a/src/pixi/renderers/webgl/WebGLRenderGroup.js +++ b/src/pixi/renderers/webgl/WebGLRenderGroup.js @@ -18,16 +18,16 @@ PIXI.WebGLRenderGroup = function(gl, transparent) { this.gl = gl; - this.root; - - this.backgroundColor; - this.transparent = transparent == undefined ? true : transparent; - + this.root = null; + + this.backgroundColor = undefined; + this.transparent = transparent === undefined ? true : transparent; + this.batchs = []; this.toRemove = []; - console.log(this.transparent) + //console.log(this.transparent); this.filterManager = new PIXI.WebGLFilterManager(this.transparent); -} +}; // constructor PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup; @@ -37,22 +37,22 @@ * * @method setRenderable * @param displayObject {DisplayObject} - * @private + * @private */ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); - + displayObject.worldVisible = displayObject.visible; - + // soooooo // // to check if any batchs exist already?? - + // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); -} +}; /** * Renders the stage to its webgl view @@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer) { PIXI.WebGLRenderer.updateTextures(); - + var gl = this.gl; gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y); this.filterManager.begin(projection, buffer); - + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // will render all the elements in the group var renderable; - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - + renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); continue; } - + // render special this.renderSpecial(renderable, projection); } - -} +}; /** * Renders a specific displayObject @@ -109,13 +108,16 @@ // to do! // render part of the scene... - + var startIndex; var startBatchIndex; - + var endIndex; var endBatchIndex; - + var endBatch; + + var head; + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -130,25 +132,24 @@ } var startBatch = nextRenderable.batch; //console.log(nextRenderable); - + //console.log(renderable) if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; - - var head = startBatch.head; - var next = head; - + + head = startBatch.head; + // ok now we have the batch.. need to find the start index! - if(head == nextRenderable) + if(head === nextRenderable) { startIndex = 0; } else { startIndex = 1; - - while(head.__next != nextRenderable) + + while(head.__next !== nextRenderable) { startIndex++; head = head.__next; @@ -159,7 +160,7 @@ { startBatch = nextRenderable; } - + // Get the LAST renderable object var lastRenderable = displayObject.last; while(lastRenderable._iPrev) @@ -167,22 +168,22 @@ if(lastRenderable.renderable && lastRenderable.__renderGroup)break; lastRenderable = lastRenderable._iNext; } - + if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; - - var head = endBatch.head; - - if(head == lastRenderable) + + head = endBatch.head; + + if(head === lastRenderable) { endIndex = 0; } else { endIndex = 1; - - while(head.__next != lastRenderable) + + while(head.__next !== lastRenderable) { endIndex++; head = head.__next; @@ -193,11 +194,11 @@ { endBatch = lastRenderable; } - + //console.log(endBatch); // TODO - need to fold this up a bit! - - if(startBatch == endBatch) + + if(startBatch === endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { @@ -209,11 +210,11 @@ } return; } - + // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); - + // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { @@ -223,12 +224,13 @@ { this.renderSpecial(startBatch, projection); } - + // DO the middle batchs.. - for (var i=startBatchIndex+1; i < endBatchIndex; i++) + var renderable; + for (var i = startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; - + if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); @@ -238,7 +240,7 @@ this.renderSpecial(renderable, projection); } } - + // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { @@ -248,7 +250,7 @@ { this.renderSpecial(endBatch, projection); } -} +}; /** * Renders a specific renderable @@ -260,8 +262,8 @@ */ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) { - - var worldVisible = renderable.vcount === PIXI.visibleCount + + var worldVisible = renderable.vcount === PIXI.visibleCount; if(renderable instanceof PIXI.TilingSprite) @@ -284,9 +286,8 @@ { this.handleFilterBlock(renderable, projection); } -} +}; -flip = false; var maskStack = []; var maskPosition = 0; @@ -298,30 +299,30 @@ * for now only masks are supported.. */ var gl = PIXI.gl; - + if(filterBlock.open) { if(filterBlock.data instanceof Array) { this.filterManager.pushFilter(filterBlock); // ok so.. - + } else - { + { maskPosition++; - maskStack.push(filterBlock) - + maskStack.push(filterBlock); + gl.enable(gl.STENCIL_TEST); - + gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - + PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -335,27 +336,26 @@ } else { - var maskData = maskStack.pop(filterBlock) - + var maskData = maskStack.pop(filterBlock); if(maskData) { gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); PIXI.WebGLGraphics.renderGraphics(maskData.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - }; + } gl.disable(gl.STENCIL_TEST); } } -} +}; /** * Updates a webgl texture @@ -366,23 +366,23 @@ */ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { - + // TODO definitely can optimse this function.. - + this.removeObject(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; - while(previousRenderable != this.root) + while(previousRenderable !== this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -395,9 +395,9 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - + this.insertObject(displayObject, previousRenderable, nextRenderable); -} +}; /** * Adds filter blocks @@ -417,13 +417,13 @@ * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -431,13 +431,13 @@ * scene graph */ var previousRenderable2 = end; - while(previousRenderable2 != this.root.first) + while(previousRenderable2 !== this.root.first) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); -} +}; /** * Remove filter blocks @@ -451,7 +451,7 @@ { this.removeObject(start); this.removeObject(end); -} +}; /** * Adds a display object and children to the webgl context @@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ - + var previousRenderable = displayObject.first; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -489,26 +489,27 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - - // one the display object hits this. we can break the loop - + + // one the display object hits this. we can break the loop + var tempObject = displayObject.first; var testObject = displayObject.last._iNext; - do + + do { tempObject.__renderGroup = this; - + if(tempObject.renderable) { - + this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } - + tempObject = tempObject._iNext; } - while(tempObject != testObject) -} + while(tempObject !== testObject); +}; /** * Removes a display object and children to the webgl context @@ -519,18 +520,16 @@ */ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { - if(displayObject.__renderGroup != this)return; - -// var displayObject = displayObject.first; - var lastObject = displayObject.last; - do + if(displayObject.__renderGroup !== this) return; + + do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } - while(displayObject) -} + while(displayObject); +}; /** * Inserts a displayObject into the linked list @@ -546,22 +545,23 @@ // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; - + var index, batch; + /* * so now we have the next renderable and the previous renderable - * + * */ if(displayObject instanceof PIXI.Sprite) { - var previousBatch - var nextBatch - + var previousBatch; + var nextBatch; + if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { - if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; @@ -573,40 +573,40 @@ // TODO reword! previousBatch = previousSprite; } - + if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; - + //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { - if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { - if(nextBatch == previousBatch) + if(nextBatch === previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var batch = PIXI.WebGLRenderer.getBatch(); + batch = PIXI.WebGLRenderer.getBatch(); - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); - + return; } } @@ -615,39 +615,39 @@ else { // TODO re-word! - + nextBatch = nextSprite; } } - + /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ - - var batch = PIXI.WebGLRenderer.getBatch(); + + batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); - if(previousBatch) // if this is invalid it means + if(previousBatch) // if this is invalid it means { - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } - + return; } else if(displayObject instanceof PIXI.TilingSprite) { - + // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); - + } else if(displayObject instanceof PIXI.Strip) { @@ -655,20 +655,21 @@ this.initStrip(displayObject); // this.batchs.push(displayObject); } + /* else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); - + // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } - - this.insertAfter(displayObject, previousSprite); - - // insert and SPLIT! + */ -} + this.insertAfter(displayObject, previousSprite); + + // insert and SPLIT! +}; /** * Inserts a displayObject into the linked list @@ -680,36 +681,38 @@ */ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { + var index; + if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; - + if(previousBatch) { // so this object is in a batch! - + // is it not? need to split the batch - if(previousBatch.tail == displayObject) + if(previousBatch.tail === displayObject) { - // is it tail? insert in to batchs - var index = this.batchs.indexOf( previousBatch ); + // is it tail? insert in to batchs + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // - + // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); - + // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } @@ -720,10 +723,10 @@ } else { - var index = this.batchs.indexOf( displayObject ); + index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } -} +}; /** * Removes a displayObject from the linked list @@ -736,26 +739,26 @@ { // loop through children.. // display object // - + // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. - * + * */ var batchToRemove; - + if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering - + batch.remove(displayObject); - - if(batch.size==0) + + if(batch.size === 0) { batchToRemove = batch; } @@ -764,44 +767,44 @@ { batchToRemove = displayObject; } - + /* * Looks like there is somthing that needs removing! */ - if(batchToRemove) + if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); - if(index == -1)return;// this means it was added then removed before rendered - + if(index === -1)return;// this means it was added then removed before rendered + // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? - if(index == 0 || index == this.batchs.length-1) + if(index === 0 || index === this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); - + return; } - + if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { - if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) + if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); - + if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } - + this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } -} +}; /** @@ -816,26 +819,26 @@ var gl = this.gl; // make the texture tilable.. - + sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); - + sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); - + sprite.colors = new Float32Array([1,1,1,1]); - - sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); - + + sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]); + sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); @@ -847,7 +850,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); - + // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) @@ -861,7 +864,7 @@ { sprite.texture.baseTexture._powerOf2 = true; } -} +}; /** * Renders a Strip @@ -879,18 +882,16 @@ var shader = PIXI.stripShader; - var program = shader.program; - var m = PIXI.mat3.clone(strip.worldTransform); - + PIXI.mat3.transpose(m); - + // console.log(projection) - // set the matrix transform for the + // set the matrix transform for the gl.uniformMatrix3fv(shader.translationMatrix, false, m); gl.uniform2f(shader.projectionVector, projection.x, projection.y); gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(shader.alpha, strip.worldAlpha); /* @@ -903,24 +904,24 @@ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ - + //console.log("!!") if(!strip.dirty) - { + { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } @@ -928,32 +929,32 @@ { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); // console.log(strip.texture.baseTexture._glTexture) gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); - + } - + gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); - + PIXI.deactivateStripShader(); //gl.useProgram(PIXI.currentProgram); -} +}; /** * Renders a TilingSprite @@ -967,35 +968,32 @@ { var gl = this.gl; - - var shaderProgram = PIXI.shaderProgram; - var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; - + var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; - + sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; - + sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; - + sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs); + this.renderStrip(sprite, projectionMatrix); -} +}; /** * Initializes a strip to be rendered @@ -1008,13 +1006,12 @@ { // build the strip! var gl = this.gl; - var shaderProgram = this.shaderProgram; - + strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); @@ -1024,8 +1021,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); -} - +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 9b5e703..1acec35 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -6,7 +6,7 @@ // an instance of the gl context.. // only one at the moment :/ -PIXI.gl; +PIXI.gl = null; /** * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer @@ -21,7 +21,7 @@ * @param view {Canvas} the canvas to use as a view, optional * @param transparent=false {Boolean} the transparency of the render view, default false * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * + * */ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) { @@ -32,14 +32,14 @@ this.width = width || 800; this.height = height || 600; - this.view = view || document.createElement( 'canvas' ); + this.view = view || document.createElement( 'canvas' ); this.view.width = this.width; this.view.height = this.height; - // deal with losing context.. + // deal with losing context.. var scope = this; - this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) - this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) + this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false); + this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false); this.batchs = []; @@ -48,30 +48,30 @@ antialias:!!antialias, // SPEED UP?? premultipliedAlpha:false, stencil:true - } + }; //try 'experimental-webgl' try { - PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options); + PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options); } catch (e) { //try 'webgl' try { - PIXI.gl = this.gl = this.view.getContext("webgl", options); - } catch (e) { + PIXI.gl = this.gl = this.view.getContext('webgl', options); + } catch (e2) { // fail, not able to get a context - throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); + throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); } } PIXI.initDefaultShaders(); - - + + // PIXI.activateDefaultShader(); var gl = this.gl; - + gl.useProgram(PIXI.defaultShader.program); @@ -82,7 +82,7 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); - gl.colorMask(true, true, true, this.transparent); + gl.colorMask(true, true, true, this.transparent); PIXI.projection = new PIXI.Point(400, 300); PIXI.offset = new PIXI.Point(0, 0); @@ -96,7 +96,7 @@ this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent); // this.stageRenderGroup. = this.transparent -} +}; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; @@ -107,11 +107,11 @@ * @static * @method getBatch * @return {WebGLBatch} - * @private + * @private */ PIXI.WebGLRenderer.getBatch = function() { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); } @@ -119,7 +119,7 @@ { return PIXI._batchs.pop(); } -} +}; /** * Puts a batch back into the pool @@ -131,9 +131,9 @@ */ PIXI.WebGLRenderer.returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * Renders the stage to its webGL view @@ -144,8 +144,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage) { if(this.contextLost)return; - - + + // if rendering a new stage clear the batchs.. if(this.__stage !== stage) { @@ -155,33 +155,33 @@ this.stageRenderGroup.setRenderable(stage); } - // update any textures + // update any textures PIXI.WebGLRenderer.updateTextures(); - - // update the scene graph + + // update the scene graph PIXI.visibleCount++; stage.updateTransform(); - + var gl = this.gl; - + // -- Does this need to be set every frame? -- // - gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - + gl.colorMask(true, true, true, this.transparent); + gl.viewport(0, 0, this.width, this.height); + gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); + + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); // HACK TO TEST - + this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; - + PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + this.stageRenderGroup.render(PIXI.projection); - + // interaction // run interaction! if(stage.interactive) @@ -193,18 +193,18 @@ stage.interactionManager.setTarget(this); } } - + // after rendering lets confirm all frames that have been uodated.. if(PIXI.Texture.frameUpdates.length > 0) { - for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) + for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) { PIXI.Texture.frameUpdates[i].updateFrame = false; - }; - + } + PIXI.Texture.frameUpdates = []; } -} +}; /** * Updates the textures loaded into this webgl renderer @@ -215,12 +215,18 @@ */ PIXI.WebGLRenderer.updateTextures = function() { + var i = 0; + //TODO break this out into a texture manager... - for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); - for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + for (i = 0; i < PIXI.texturesToUpdate.length; i++) + PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); + + for (i = 0; i < PIXI.texturesToDestroy.length; i++) + PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; -} +}; /** * Updates a loaded webgl texture @@ -234,7 +240,7 @@ { //TODO break this out into a texture manager... var gl = PIXI.gl; - + if(!texture._glTexture) { texture._glTexture = gl.createTexture(); @@ -264,7 +270,7 @@ gl.bindTexture(gl.TEXTURE_2D, null); } -} +}; /** * Destroys a loaded webgl texture @@ -283,7 +289,7 @@ texture._glTexture = gl.createTexture(); gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture); } -} +}; /** * resizes the webGL view to the specified width and height @@ -300,13 +306,13 @@ this.view.width = width; this.view.height = height; - this.gl.viewport(0, 0, this.width, this.height); + this.gl.viewport(0, 0, this.width, this.height); //var projectionMatrix = this.projectionMatrix; PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + //PIXI.size.x = this.width/2; //PIXI.size.y = -this.height/2; @@ -314,7 +320,7 @@ // projectionMatrix[5] = -2/this.height; // projectionMatrix[12] = -1; // projectionMatrix[13] = 1; -} +}; /** * Handles a lost webgl context @@ -327,7 +333,7 @@ { event.preventDefault(); this.contextLost = true; -} +}; /** * Handles a restored webgl context @@ -336,28 +342,28 @@ * @param event {Event} * @private */ -PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) +PIXI.WebGLRenderer.prototype.handleContextRestored = function() { - this.gl = this.view.getContext("experimental-webgl", { + this.gl = this.view.getContext('experimental-webgl', { alpha: true }); - this.initShaders(); + this.initShaders(); - for(var key in PIXI.TextureCache) + for(var key in PIXI.TextureCache) { - var texture = PIXI.TextureCache[key].baseTexture; - texture._glTexture = null; - PIXI.WebGLRenderer.updateTexture(texture); - }; + var texture = PIXI.TextureCache[key].baseTexture; + texture._glTexture = null; + PIXI.WebGLRenderer.updateTexture(texture); + } - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - this.batchs[i].restoreLostContext(this.gl)// + this.batchs[i].restoreLostContext(this.gl); this.batchs[i].dirty = true; - }; + } PIXI._restoreBatchs(this.gl); this.contextLost = false; -} +}; diff --git a/src/pixi/renderers/webgl/WebGLShaders.js b/src/pixi/renderers/webgl/WebGLShaders.js index 016d37c..b6b66b7 100644 --- a/src/pixi/renderers/webgl/WebGLShaders.js +++ b/src/pixi/renderers/webgl/WebGLShaders.js @@ -2,8 +2,7 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - -PIXI.initDefaultShaders = function() +PIXI.initDefaultShaders = function() { PIXI.primitiveShader = new PIXI.PrimitiveShader(); PIXI.primitiveShader.init(); @@ -14,53 +13,51 @@ PIXI.defaultShader = new PIXI.PixiShader(); PIXI.defaultShader.init(); - var gl = PIXI.gl; + var gl = PIXI.gl; var shaderProgram = PIXI.defaultShader.program; - gl.useProgram(shaderProgram); - + gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.activatePrimitiveShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.primitiveShader.program); - + gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute); -} +}; PIXI.deactivatePrimitiveShader = function() { var gl = PIXI.gl; gl.useProgram(PIXI.defaultShader.program); - + gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); - -} +}; PIXI.activateStripShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.stripShader.program); // gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.deactivateStripShader = function() { @@ -68,7 +65,7 @@ gl.useProgram(PIXI.defaultShader.program); //gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; /* @@ -78,12 +75,12 @@ PIXI.CompileVertexShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); -} +}; PIXI.CompileFragmentShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); -} +}; PIXI._CompileShader = function(gl, shaderSrc, shaderType) { @@ -93,29 +90,28 @@ gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - console.log(gl.getShaderInfoLog(shader)); + window.console.log(gl.getShaderInfoLog(shader)); return null; } return shader; -} - +}; PIXI.compileProgram = function(vertexSrc, fragmentSrc) { var gl = PIXI.gl; var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); - - var shaderProgram = gl.createProgram(); - - gl.attachShader(shaderProgram, vertexShader); - gl.attachShader(shaderProgram, fragmentShader); - gl.linkProgram(shaderProgram); - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - console.log("Could not initialise shaders"); - } + var shaderProgram = gl.createProgram(); + + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + window.console.log("Could not initialise shaders"); + } return shaderProgram; -} +}; diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index 128c217..fb5fb8c 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * A Text Object will create a line(s) of text using bitmap font. To split a line you can use "\n", "\r" or "\r\n" + * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' * You can generate the fnt files using * http://www.angelcode.com/products/bmfont/ for windows or * http://www.bmglyph.com/ for mac. @@ -13,8 +13,8 @@ * @constructor * @param text {String} The copy that you would like the text to display * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText = function(text, style) { @@ -23,8 +23,7 @@ this.setText(text); this.setStyle(style); this.updateText(); - this.dirty = false - + this.dirty = false; }; // constructor @@ -39,7 +38,7 @@ */ PIXI.BitmapText.prototype.setText = function(text) { - this.text = text || " "; + this.text = text || ' '; this.dirty = true; }; @@ -48,16 +47,16 @@ * * @method setStyle * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText.prototype.setStyle = function(style) { style = style || {}; - style.align = style.align || "left"; + style.align = style.align || 'left'; this.style = style; - var font = style.font.split(" "); + var font = style.font.split(' '); this.fontName = font[font.length - 1]; this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; @@ -100,7 +99,7 @@ if(prevCharCode && charData[prevCharCode]) { - pos.x += charData.kerning[prevCharCode]; + pos.x += charData.kerning[prevCharCode]; } chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; @@ -115,11 +114,11 @@ for(i = 0; i <= line; i++) { var alignOffset = 0; - if(this.style.align == "right") + if(this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } @@ -128,7 +127,7 @@ for(i = 0; i < chars.length; i++) { - var c = new PIXI.Sprite(chars[i].texture)//PIXI.Sprite.fromFrame(chars[i].charCode); + var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode); c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; c.position.y = chars[i].position.y * scale; c.scale.x = c.scale.y = scale; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index f708d85..75d50d0 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -3,25 +3,25 @@ */ /** - * A Text Object will create a line(s) of text to split a line you can use "\n" + * A Text Object will create a line(s) of text to split a line you can use '\n' * * @class Text * @extends Sprite * @constructor * @param text {String} The copy that you would like the text to display * @param [style] {Object} The style parameters - * @param [style.font] {String} default "bold 20pt Arial" The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font] {String} default 'bold 20pt Arial' The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap */ PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - this.context = this.canvas.getContext("2d"); + this.canvas = document.createElement('canvas'); + this.context = this.canvas.getContext('2d'); PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); @@ -40,10 +40,10 @@ * * @method setStyle * @param [style] {Object} The style parameters - * @param [style.font="bold 20pt Arial"] {String} The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke="black"] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font='bold 20pt Arial'] {String} The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke='black'] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap @@ -51,10 +51,10 @@ PIXI.Text.prototype.setStyle = function(style) { style = style || {}; - style.font = style.font || "bold 20pt Arial"; - style.fill = style.fill || "black"; - style.align = style.align || "left"; - style.stroke = style.stroke || "black"; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 + style.font = style.font || 'bold 20pt Arial'; + style.fill = style.fill || 'black'; + style.align = style.align || 'left'; + style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 style.strokeThickness = style.strokeThickness || 0; style.wordWrap = style.wordWrap || false; style.wordWrapWidth = style.wordWrapWidth || 100; @@ -63,14 +63,14 @@ }; /** - * Set the copy for the text object. To split a line you can use "\n" + * Set the copy for the text object. To split a line you can use '\n' * * @method setText * @param {String} text The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { - this.text = text.toString() || " "; + this.text = text.toString() || ' '; this.dirty = true; }; @@ -105,7 +105,7 @@ this.canvas.width = maxLineWidth + this.style.strokeThickness; //calculate text height - var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + var lineHeight = this.determineFontHeight('font: ' + this.style.font + ';') + this.style.strokeThickness; this.canvas.height = lineHeight * lines.length; //set canvas text styles @@ -115,18 +115,18 @@ this.context.strokeStyle = this.style.stroke; this.context.lineWidth = this.style.strokeThickness; - this.context.textBaseline = "top"; + this.context.textBaseline = 'top'; //draw lines line by line for (i = 0; i < lines.length; i++) { var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); - if(this.style.align == "right") + if(this.style.align === 'right') { linePosition.x += maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { linePosition.x += (maxLineWidth - lineWidths[i]) / 2; } @@ -197,11 +197,11 @@ if(!result) { - var body = document.getElementsByTagName("body")[0]; - var dummy = document.createElement("div"); - var dummyText = document.createTextNode("M"); + var body = document.getElementsByTagName('body')[0]; + var dummy = document.createElement('div'); + var dummyText = document.createTextNode('M'); dummy.appendChild(dummyText); - dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0'); + dummy.setAttribute('style', fontStyle + ';position:absolute;top:0;left:0'); body.appendChild(dummy); result = dummy.offsetHeight; @@ -225,34 +225,34 @@ { // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. - var result = ""; - var lines = text.split("\n"); + var result = ''; + var lines = text.split('\n'); for (var i = 0; i < lines.length; i++) { var spaceLeft = this.style.wordWrapWidth; - var words = lines[i].split(" "); + var words = lines[i].split(' '); for (var j = 0; j < words.length; j++) { var wordWidth = this.context.measureText(words[j]).width; - var wordWidthWithSpace = wordWidth + this.context.measureText(" ").width; + var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if(wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is // greater than the word wrap width. if(j > 0) { - result += "\n"; + result += '\n'; } - result += words[j] + " "; + result += words[j] + ' '; spaceLeft = this.style.wordWrapWidth - wordWidth; } else { spaceLeft -= wordWidthWithSpace; - result += words[j] + " "; + result += words[j] + ' '; } } - result += "\n"; + result += '\n'; } return result; }; diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 6c9a83c..317e4e0 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -69,7 +69,7 @@ { var scope = this; - this.source.onload = function(){ + this.source.onload = function() { scope.hasLoaded = true; scope.width = scope.source.width; @@ -78,7 +78,7 @@ // add it to somewhere... PIXI.texturesToUpdate.push(scope); scope.dispatchEvent( { type: 'loaded', content: scope } ); - } + }; // this.image.src = imageUrl; } } @@ -93,7 +93,7 @@ this.imageUrl = null; this._powerOf2 = false; -} +}; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; @@ -106,17 +106,17 @@ { if(this.source instanceof Image) { - if (this.imageUrl in PIXI.BaseTextureCache) + if (this.imageUrl in PIXI.BaseTextureCache) delete PIXI.BaseTextureCache[this.imageUrl]; this.imageUrl = null; this.source.src = null; } this.source = null; PIXI.texturesToDestroy.push(this); -} +}; /** - * + * * * @method destroy */ @@ -126,7 +126,7 @@ this.hasLoaded = false; this.source.src = null; this.source.src = newSrc; -} +}; /** * Helper function that returns a base texture based on an image url @@ -156,4 +156,4 @@ } return baseTexture; -} +}; diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index c7451df..fe1df38 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -5,11 +5,11 @@ /** A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. - __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded. - Otherwise black rectangles will be drawn instead. - + __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded. + Otherwise black rectangles will be drawn instead. + RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example: - + var renderTexture = new PIXI.RenderTexture(800, 600); var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); sprite.position.x = 800/2; @@ -39,7 +39,7 @@ this.indetityMatrix = PIXI.mat3.create(); - this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); + this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); if(PIXI.gl) { @@ -49,7 +49,7 @@ { this.initCanvas(); } -} +}; PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype ); PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; @@ -68,7 +68,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); this.glFramebuffer.width = this.width; - this.glFramebuffer.height = this.height; + this.glFramebuffer.height = this.height; this.baseTexture = new PIXI.BaseTexture(); @@ -95,7 +95,7 @@ // set the correct render function.. this.render = this.renderWebGL; -} +}; PIXI.RenderTexture.prototype.resize = function(width, height) @@ -103,24 +103,24 @@ this.width = width; this.height = height; - + if(PIXI.gl) { - this.projection.x = this.width/2 - this.projection.y = -this.height/2; - + this.projection.x = this.width / 2; + this.projection.y = -this.height / 2; + var gl = PIXI.gl; gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); } else { - - this.frame.width = this.width + + this.frame.width = this.width; this.frame.height = this.height; this.renderer.resize(this.width, this.height); } -} +}; /** * Initializes the canvas data for this texture @@ -136,7 +136,7 @@ this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); this.render = this.renderCanvas; -} +}; /** * This function will draw the display object to the texture. @@ -151,15 +151,15 @@ var gl = PIXI.gl; // enable the alpha color mask.. - gl.colorMask(true, true, true, true); + gl.colorMask(true, true, true, true); - gl.viewport(0, 0, this.width, this.height); + gl.viewport(0, 0, this.width, this.height); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); if(clear) { - gl.clearColor(0,0,0, 0); + gl.clearColor(0,0,0, 0); gl.clear(gl.COLOR_BUFFER_BIT); } @@ -178,20 +178,20 @@ displayObject.worldTransform[2] = position.x; displayObject.worldTransform[5] -= position.y; } - + PIXI.visibleCount++; displayObject.vcount = PIXI.visibleCount; - + for(var i=0,j=children.length; i this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) { - throw new Error("Texture Error: frame does not fit inside the base Texture dimensions " + this); + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this); } this.updateFrame = true; PIXI.Texture.frameUpdates.push(this); //this.dispatchEvent( { type: 'update', content: this } ); -} +}; /** * Helper function that returns a texture based on an image url @@ -145,7 +145,7 @@ } return texture; -} +}; /** * Helper function that returns a texture based on a frame id @@ -159,9 +159,9 @@ PIXI.Texture.fromFrame = function(frameId) { var texture = PIXI.TextureCache[frameId]; - if(!texture)throw new Error("The frameId '"+ frameId +"' does not exist in the texture cache " + this); + if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache ' + this); return texture; -} +}; /** * Helper function that returns a texture based on a canvas element @@ -176,7 +176,7 @@ { var baseTexture = new PIXI.BaseTexture(canvas); return new PIXI.Texture(baseTexture); -} +}; /** @@ -190,7 +190,7 @@ PIXI.Texture.addTextureToCache = function(texture, id) { PIXI.TextureCache[id] = texture; -} +}; /** * Remove a texture from the textureCache. @@ -202,11 +202,10 @@ */ PIXI.Texture.removeTextureFromCache = function(id) { - var texture = PIXI.TextureCache[id] + var texture = PIXI.TextureCache[id]; PIXI.TextureCache[id] = null; return texture; -} +}; // this is more for webGL.. it contains updated frames.. PIXI.Texture.frameUpdates = []; - diff --git a/src/pixi/utils/Detector.js b/src/pixi/utils/Detector.js index 2bc7d34..535a94f 100644 --- a/src/pixi/utils/Detector.js +++ b/src/pixi/utils/Detector.js @@ -23,14 +23,20 @@ if(!height)height = 600; // BORROWED from Mr Doob (mrdoob.com) - var webgl = ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )(); + var webgl = ( function () { try { + var canvas = document.createElement( 'canvas' ); + return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); + } catch( e ) { + return false; + } + } )(); if(webgl) { - var ie = (navigator.userAgent.toLowerCase().indexOf('msie') != -1); - webgl = !ie; + var ie = (navigator.userAgent.toLowerCase().indexOf('msie') !== -1); + webgl = !ie; } - + //console.log(webgl); if( webgl ) { diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderGroup.js b/src/pixi/renderers/webgl/WebGLRenderGroup.js index 990d9be..47d8b96 100644 --- a/src/pixi/renderers/webgl/WebGLRenderGroup.js +++ b/src/pixi/renderers/webgl/WebGLRenderGroup.js @@ -18,16 +18,16 @@ PIXI.WebGLRenderGroup = function(gl, transparent) { this.gl = gl; - this.root; - - this.backgroundColor; - this.transparent = transparent == undefined ? true : transparent; - + this.root = null; + + this.backgroundColor = undefined; + this.transparent = transparent === undefined ? true : transparent; + this.batchs = []; this.toRemove = []; - console.log(this.transparent) + //console.log(this.transparent); this.filterManager = new PIXI.WebGLFilterManager(this.transparent); -} +}; // constructor PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup; @@ -37,22 +37,22 @@ * * @method setRenderable * @param displayObject {DisplayObject} - * @private + * @private */ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); - + displayObject.worldVisible = displayObject.visible; - + // soooooo // // to check if any batchs exist already?? - + // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); -} +}; /** * Renders the stage to its webgl view @@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer) { PIXI.WebGLRenderer.updateTextures(); - + var gl = this.gl; gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y); this.filterManager.begin(projection, buffer); - + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // will render all the elements in the group var renderable; - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - + renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); continue; } - + // render special this.renderSpecial(renderable, projection); } - -} +}; /** * Renders a specific displayObject @@ -109,13 +108,16 @@ // to do! // render part of the scene... - + var startIndex; var startBatchIndex; - + var endIndex; var endBatchIndex; - + var endBatch; + + var head; + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -130,25 +132,24 @@ } var startBatch = nextRenderable.batch; //console.log(nextRenderable); - + //console.log(renderable) if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; - - var head = startBatch.head; - var next = head; - + + head = startBatch.head; + // ok now we have the batch.. need to find the start index! - if(head == nextRenderable) + if(head === nextRenderable) { startIndex = 0; } else { startIndex = 1; - - while(head.__next != nextRenderable) + + while(head.__next !== nextRenderable) { startIndex++; head = head.__next; @@ -159,7 +160,7 @@ { startBatch = nextRenderable; } - + // Get the LAST renderable object var lastRenderable = displayObject.last; while(lastRenderable._iPrev) @@ -167,22 +168,22 @@ if(lastRenderable.renderable && lastRenderable.__renderGroup)break; lastRenderable = lastRenderable._iNext; } - + if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; - - var head = endBatch.head; - - if(head == lastRenderable) + + head = endBatch.head; + + if(head === lastRenderable) { endIndex = 0; } else { endIndex = 1; - - while(head.__next != lastRenderable) + + while(head.__next !== lastRenderable) { endIndex++; head = head.__next; @@ -193,11 +194,11 @@ { endBatch = lastRenderable; } - + //console.log(endBatch); // TODO - need to fold this up a bit! - - if(startBatch == endBatch) + + if(startBatch === endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { @@ -209,11 +210,11 @@ } return; } - + // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); - + // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { @@ -223,12 +224,13 @@ { this.renderSpecial(startBatch, projection); } - + // DO the middle batchs.. - for (var i=startBatchIndex+1; i < endBatchIndex; i++) + var renderable; + for (var i = startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; - + if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); @@ -238,7 +240,7 @@ this.renderSpecial(renderable, projection); } } - + // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { @@ -248,7 +250,7 @@ { this.renderSpecial(endBatch, projection); } -} +}; /** * Renders a specific renderable @@ -260,8 +262,8 @@ */ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) { - - var worldVisible = renderable.vcount === PIXI.visibleCount + + var worldVisible = renderable.vcount === PIXI.visibleCount; if(renderable instanceof PIXI.TilingSprite) @@ -284,9 +286,8 @@ { this.handleFilterBlock(renderable, projection); } -} +}; -flip = false; var maskStack = []; var maskPosition = 0; @@ -298,30 +299,30 @@ * for now only masks are supported.. */ var gl = PIXI.gl; - + if(filterBlock.open) { if(filterBlock.data instanceof Array) { this.filterManager.pushFilter(filterBlock); // ok so.. - + } else - { + { maskPosition++; - maskStack.push(filterBlock) - + maskStack.push(filterBlock); + gl.enable(gl.STENCIL_TEST); - + gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - + PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -335,27 +336,26 @@ } else { - var maskData = maskStack.pop(filterBlock) - + var maskData = maskStack.pop(filterBlock); if(maskData) { gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); PIXI.WebGLGraphics.renderGraphics(maskData.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - }; + } gl.disable(gl.STENCIL_TEST); } } -} +}; /** * Updates a webgl texture @@ -366,23 +366,23 @@ */ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { - + // TODO definitely can optimse this function.. - + this.removeObject(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; - while(previousRenderable != this.root) + while(previousRenderable !== this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -395,9 +395,9 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - + this.insertObject(displayObject, previousRenderable, nextRenderable); -} +}; /** * Adds filter blocks @@ -417,13 +417,13 @@ * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -431,13 +431,13 @@ * scene graph */ var previousRenderable2 = end; - while(previousRenderable2 != this.root.first) + while(previousRenderable2 !== this.root.first) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); -} +}; /** * Remove filter blocks @@ -451,7 +451,7 @@ { this.removeObject(start); this.removeObject(end); -} +}; /** * Adds a display object and children to the webgl context @@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ - + var previousRenderable = displayObject.first; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -489,26 +489,27 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - - // one the display object hits this. we can break the loop - + + // one the display object hits this. we can break the loop + var tempObject = displayObject.first; var testObject = displayObject.last._iNext; - do + + do { tempObject.__renderGroup = this; - + if(tempObject.renderable) { - + this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } - + tempObject = tempObject._iNext; } - while(tempObject != testObject) -} + while(tempObject !== testObject); +}; /** * Removes a display object and children to the webgl context @@ -519,18 +520,16 @@ */ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { - if(displayObject.__renderGroup != this)return; - -// var displayObject = displayObject.first; - var lastObject = displayObject.last; - do + if(displayObject.__renderGroup !== this) return; + + do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } - while(displayObject) -} + while(displayObject); +}; /** * Inserts a displayObject into the linked list @@ -546,22 +545,23 @@ // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; - + var index, batch; + /* * so now we have the next renderable and the previous renderable - * + * */ if(displayObject instanceof PIXI.Sprite) { - var previousBatch - var nextBatch - + var previousBatch; + var nextBatch; + if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { - if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; @@ -573,40 +573,40 @@ // TODO reword! previousBatch = previousSprite; } - + if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; - + //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { - if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { - if(nextBatch == previousBatch) + if(nextBatch === previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var batch = PIXI.WebGLRenderer.getBatch(); + batch = PIXI.WebGLRenderer.getBatch(); - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); - + return; } } @@ -615,39 +615,39 @@ else { // TODO re-word! - + nextBatch = nextSprite; } } - + /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ - - var batch = PIXI.WebGLRenderer.getBatch(); + + batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); - if(previousBatch) // if this is invalid it means + if(previousBatch) // if this is invalid it means { - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } - + return; } else if(displayObject instanceof PIXI.TilingSprite) { - + // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); - + } else if(displayObject instanceof PIXI.Strip) { @@ -655,20 +655,21 @@ this.initStrip(displayObject); // this.batchs.push(displayObject); } + /* else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); - + // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } - - this.insertAfter(displayObject, previousSprite); - - // insert and SPLIT! + */ -} + this.insertAfter(displayObject, previousSprite); + + // insert and SPLIT! +}; /** * Inserts a displayObject into the linked list @@ -680,36 +681,38 @@ */ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { + var index; + if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; - + if(previousBatch) { // so this object is in a batch! - + // is it not? need to split the batch - if(previousBatch.tail == displayObject) + if(previousBatch.tail === displayObject) { - // is it tail? insert in to batchs - var index = this.batchs.indexOf( previousBatch ); + // is it tail? insert in to batchs + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // - + // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); - + // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } @@ -720,10 +723,10 @@ } else { - var index = this.batchs.indexOf( displayObject ); + index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } -} +}; /** * Removes a displayObject from the linked list @@ -736,26 +739,26 @@ { // loop through children.. // display object // - + // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. - * + * */ var batchToRemove; - + if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering - + batch.remove(displayObject); - - if(batch.size==0) + + if(batch.size === 0) { batchToRemove = batch; } @@ -764,44 +767,44 @@ { batchToRemove = displayObject; } - + /* * Looks like there is somthing that needs removing! */ - if(batchToRemove) + if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); - if(index == -1)return;// this means it was added then removed before rendered - + if(index === -1)return;// this means it was added then removed before rendered + // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? - if(index == 0 || index == this.batchs.length-1) + if(index === 0 || index === this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); - + return; } - + if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { - if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) + if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); - + if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } - + this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } -} +}; /** @@ -816,26 +819,26 @@ var gl = this.gl; // make the texture tilable.. - + sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); - + sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); - + sprite.colors = new Float32Array([1,1,1,1]); - - sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); - + + sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]); + sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); @@ -847,7 +850,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); - + // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) @@ -861,7 +864,7 @@ { sprite.texture.baseTexture._powerOf2 = true; } -} +}; /** * Renders a Strip @@ -879,18 +882,16 @@ var shader = PIXI.stripShader; - var program = shader.program; - var m = PIXI.mat3.clone(strip.worldTransform); - + PIXI.mat3.transpose(m); - + // console.log(projection) - // set the matrix transform for the + // set the matrix transform for the gl.uniformMatrix3fv(shader.translationMatrix, false, m); gl.uniform2f(shader.projectionVector, projection.x, projection.y); gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(shader.alpha, strip.worldAlpha); /* @@ -903,24 +904,24 @@ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ - + //console.log("!!") if(!strip.dirty) - { + { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } @@ -928,32 +929,32 @@ { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); // console.log(strip.texture.baseTexture._glTexture) gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); - + } - + gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); - + PIXI.deactivateStripShader(); //gl.useProgram(PIXI.currentProgram); -} +}; /** * Renders a TilingSprite @@ -967,35 +968,32 @@ { var gl = this.gl; - - var shaderProgram = PIXI.shaderProgram; - var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; - + var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; - + sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; - + sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; - + sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs); + this.renderStrip(sprite, projectionMatrix); -} +}; /** * Initializes a strip to be rendered @@ -1008,13 +1006,12 @@ { // build the strip! var gl = this.gl; - var shaderProgram = this.shaderProgram; - + strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); @@ -1024,8 +1021,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); -} - +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 9b5e703..1acec35 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -6,7 +6,7 @@ // an instance of the gl context.. // only one at the moment :/ -PIXI.gl; +PIXI.gl = null; /** * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer @@ -21,7 +21,7 @@ * @param view {Canvas} the canvas to use as a view, optional * @param transparent=false {Boolean} the transparency of the render view, default false * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * + * */ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) { @@ -32,14 +32,14 @@ this.width = width || 800; this.height = height || 600; - this.view = view || document.createElement( 'canvas' ); + this.view = view || document.createElement( 'canvas' ); this.view.width = this.width; this.view.height = this.height; - // deal with losing context.. + // deal with losing context.. var scope = this; - this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) - this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) + this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false); + this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false); this.batchs = []; @@ -48,30 +48,30 @@ antialias:!!antialias, // SPEED UP?? premultipliedAlpha:false, stencil:true - } + }; //try 'experimental-webgl' try { - PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options); + PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options); } catch (e) { //try 'webgl' try { - PIXI.gl = this.gl = this.view.getContext("webgl", options); - } catch (e) { + PIXI.gl = this.gl = this.view.getContext('webgl', options); + } catch (e2) { // fail, not able to get a context - throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); + throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); } } PIXI.initDefaultShaders(); - - + + // PIXI.activateDefaultShader(); var gl = this.gl; - + gl.useProgram(PIXI.defaultShader.program); @@ -82,7 +82,7 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); - gl.colorMask(true, true, true, this.transparent); + gl.colorMask(true, true, true, this.transparent); PIXI.projection = new PIXI.Point(400, 300); PIXI.offset = new PIXI.Point(0, 0); @@ -96,7 +96,7 @@ this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent); // this.stageRenderGroup. = this.transparent -} +}; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; @@ -107,11 +107,11 @@ * @static * @method getBatch * @return {WebGLBatch} - * @private + * @private */ PIXI.WebGLRenderer.getBatch = function() { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); } @@ -119,7 +119,7 @@ { return PIXI._batchs.pop(); } -} +}; /** * Puts a batch back into the pool @@ -131,9 +131,9 @@ */ PIXI.WebGLRenderer.returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * Renders the stage to its webGL view @@ -144,8 +144,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage) { if(this.contextLost)return; - - + + // if rendering a new stage clear the batchs.. if(this.__stage !== stage) { @@ -155,33 +155,33 @@ this.stageRenderGroup.setRenderable(stage); } - // update any textures + // update any textures PIXI.WebGLRenderer.updateTextures(); - - // update the scene graph + + // update the scene graph PIXI.visibleCount++; stage.updateTransform(); - + var gl = this.gl; - + // -- Does this need to be set every frame? -- // - gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - + gl.colorMask(true, true, true, this.transparent); + gl.viewport(0, 0, this.width, this.height); + gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); + + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); // HACK TO TEST - + this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; - + PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + this.stageRenderGroup.render(PIXI.projection); - + // interaction // run interaction! if(stage.interactive) @@ -193,18 +193,18 @@ stage.interactionManager.setTarget(this); } } - + // after rendering lets confirm all frames that have been uodated.. if(PIXI.Texture.frameUpdates.length > 0) { - for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) + for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) { PIXI.Texture.frameUpdates[i].updateFrame = false; - }; - + } + PIXI.Texture.frameUpdates = []; } -} +}; /** * Updates the textures loaded into this webgl renderer @@ -215,12 +215,18 @@ */ PIXI.WebGLRenderer.updateTextures = function() { + var i = 0; + //TODO break this out into a texture manager... - for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); - for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + for (i = 0; i < PIXI.texturesToUpdate.length; i++) + PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); + + for (i = 0; i < PIXI.texturesToDestroy.length; i++) + PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; -} +}; /** * Updates a loaded webgl texture @@ -234,7 +240,7 @@ { //TODO break this out into a texture manager... var gl = PIXI.gl; - + if(!texture._glTexture) { texture._glTexture = gl.createTexture(); @@ -264,7 +270,7 @@ gl.bindTexture(gl.TEXTURE_2D, null); } -} +}; /** * Destroys a loaded webgl texture @@ -283,7 +289,7 @@ texture._glTexture = gl.createTexture(); gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture); } -} +}; /** * resizes the webGL view to the specified width and height @@ -300,13 +306,13 @@ this.view.width = width; this.view.height = height; - this.gl.viewport(0, 0, this.width, this.height); + this.gl.viewport(0, 0, this.width, this.height); //var projectionMatrix = this.projectionMatrix; PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + //PIXI.size.x = this.width/2; //PIXI.size.y = -this.height/2; @@ -314,7 +320,7 @@ // projectionMatrix[5] = -2/this.height; // projectionMatrix[12] = -1; // projectionMatrix[13] = 1; -} +}; /** * Handles a lost webgl context @@ -327,7 +333,7 @@ { event.preventDefault(); this.contextLost = true; -} +}; /** * Handles a restored webgl context @@ -336,28 +342,28 @@ * @param event {Event} * @private */ -PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) +PIXI.WebGLRenderer.prototype.handleContextRestored = function() { - this.gl = this.view.getContext("experimental-webgl", { + this.gl = this.view.getContext('experimental-webgl', { alpha: true }); - this.initShaders(); + this.initShaders(); - for(var key in PIXI.TextureCache) + for(var key in PIXI.TextureCache) { - var texture = PIXI.TextureCache[key].baseTexture; - texture._glTexture = null; - PIXI.WebGLRenderer.updateTexture(texture); - }; + var texture = PIXI.TextureCache[key].baseTexture; + texture._glTexture = null; + PIXI.WebGLRenderer.updateTexture(texture); + } - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - this.batchs[i].restoreLostContext(this.gl)// + this.batchs[i].restoreLostContext(this.gl); this.batchs[i].dirty = true; - }; + } PIXI._restoreBatchs(this.gl); this.contextLost = false; -} +}; diff --git a/src/pixi/renderers/webgl/WebGLShaders.js b/src/pixi/renderers/webgl/WebGLShaders.js index 016d37c..b6b66b7 100644 --- a/src/pixi/renderers/webgl/WebGLShaders.js +++ b/src/pixi/renderers/webgl/WebGLShaders.js @@ -2,8 +2,7 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - -PIXI.initDefaultShaders = function() +PIXI.initDefaultShaders = function() { PIXI.primitiveShader = new PIXI.PrimitiveShader(); PIXI.primitiveShader.init(); @@ -14,53 +13,51 @@ PIXI.defaultShader = new PIXI.PixiShader(); PIXI.defaultShader.init(); - var gl = PIXI.gl; + var gl = PIXI.gl; var shaderProgram = PIXI.defaultShader.program; - gl.useProgram(shaderProgram); - + gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.activatePrimitiveShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.primitiveShader.program); - + gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute); -} +}; PIXI.deactivatePrimitiveShader = function() { var gl = PIXI.gl; gl.useProgram(PIXI.defaultShader.program); - + gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); - -} +}; PIXI.activateStripShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.stripShader.program); // gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.deactivateStripShader = function() { @@ -68,7 +65,7 @@ gl.useProgram(PIXI.defaultShader.program); //gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; /* @@ -78,12 +75,12 @@ PIXI.CompileVertexShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); -} +}; PIXI.CompileFragmentShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); -} +}; PIXI._CompileShader = function(gl, shaderSrc, shaderType) { @@ -93,29 +90,28 @@ gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - console.log(gl.getShaderInfoLog(shader)); + window.console.log(gl.getShaderInfoLog(shader)); return null; } return shader; -} - +}; PIXI.compileProgram = function(vertexSrc, fragmentSrc) { var gl = PIXI.gl; var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); - - var shaderProgram = gl.createProgram(); - - gl.attachShader(shaderProgram, vertexShader); - gl.attachShader(shaderProgram, fragmentShader); - gl.linkProgram(shaderProgram); - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - console.log("Could not initialise shaders"); - } + var shaderProgram = gl.createProgram(); + + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + window.console.log("Could not initialise shaders"); + } return shaderProgram; -} +}; diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index 128c217..fb5fb8c 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * A Text Object will create a line(s) of text using bitmap font. To split a line you can use "\n", "\r" or "\r\n" + * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' * You can generate the fnt files using * http://www.angelcode.com/products/bmfont/ for windows or * http://www.bmglyph.com/ for mac. @@ -13,8 +13,8 @@ * @constructor * @param text {String} The copy that you would like the text to display * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText = function(text, style) { @@ -23,8 +23,7 @@ this.setText(text); this.setStyle(style); this.updateText(); - this.dirty = false - + this.dirty = false; }; // constructor @@ -39,7 +38,7 @@ */ PIXI.BitmapText.prototype.setText = function(text) { - this.text = text || " "; + this.text = text || ' '; this.dirty = true; }; @@ -48,16 +47,16 @@ * * @method setStyle * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText.prototype.setStyle = function(style) { style = style || {}; - style.align = style.align || "left"; + style.align = style.align || 'left'; this.style = style; - var font = style.font.split(" "); + var font = style.font.split(' '); this.fontName = font[font.length - 1]; this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; @@ -100,7 +99,7 @@ if(prevCharCode && charData[prevCharCode]) { - pos.x += charData.kerning[prevCharCode]; + pos.x += charData.kerning[prevCharCode]; } chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; @@ -115,11 +114,11 @@ for(i = 0; i <= line; i++) { var alignOffset = 0; - if(this.style.align == "right") + if(this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } @@ -128,7 +127,7 @@ for(i = 0; i < chars.length; i++) { - var c = new PIXI.Sprite(chars[i].texture)//PIXI.Sprite.fromFrame(chars[i].charCode); + var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode); c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; c.position.y = chars[i].position.y * scale; c.scale.x = c.scale.y = scale; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index f708d85..75d50d0 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -3,25 +3,25 @@ */ /** - * A Text Object will create a line(s) of text to split a line you can use "\n" + * A Text Object will create a line(s) of text to split a line you can use '\n' * * @class Text * @extends Sprite * @constructor * @param text {String} The copy that you would like the text to display * @param [style] {Object} The style parameters - * @param [style.font] {String} default "bold 20pt Arial" The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font] {String} default 'bold 20pt Arial' The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap */ PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - this.context = this.canvas.getContext("2d"); + this.canvas = document.createElement('canvas'); + this.context = this.canvas.getContext('2d'); PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); @@ -40,10 +40,10 @@ * * @method setStyle * @param [style] {Object} The style parameters - * @param [style.font="bold 20pt Arial"] {String} The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke="black"] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font='bold 20pt Arial'] {String} The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke='black'] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap @@ -51,10 +51,10 @@ PIXI.Text.prototype.setStyle = function(style) { style = style || {}; - style.font = style.font || "bold 20pt Arial"; - style.fill = style.fill || "black"; - style.align = style.align || "left"; - style.stroke = style.stroke || "black"; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 + style.font = style.font || 'bold 20pt Arial'; + style.fill = style.fill || 'black'; + style.align = style.align || 'left'; + style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 style.strokeThickness = style.strokeThickness || 0; style.wordWrap = style.wordWrap || false; style.wordWrapWidth = style.wordWrapWidth || 100; @@ -63,14 +63,14 @@ }; /** - * Set the copy for the text object. To split a line you can use "\n" + * Set the copy for the text object. To split a line you can use '\n' * * @method setText * @param {String} text The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { - this.text = text.toString() || " "; + this.text = text.toString() || ' '; this.dirty = true; }; @@ -105,7 +105,7 @@ this.canvas.width = maxLineWidth + this.style.strokeThickness; //calculate text height - var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + var lineHeight = this.determineFontHeight('font: ' + this.style.font + ';') + this.style.strokeThickness; this.canvas.height = lineHeight * lines.length; //set canvas text styles @@ -115,18 +115,18 @@ this.context.strokeStyle = this.style.stroke; this.context.lineWidth = this.style.strokeThickness; - this.context.textBaseline = "top"; + this.context.textBaseline = 'top'; //draw lines line by line for (i = 0; i < lines.length; i++) { var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); - if(this.style.align == "right") + if(this.style.align === 'right') { linePosition.x += maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { linePosition.x += (maxLineWidth - lineWidths[i]) / 2; } @@ -197,11 +197,11 @@ if(!result) { - var body = document.getElementsByTagName("body")[0]; - var dummy = document.createElement("div"); - var dummyText = document.createTextNode("M"); + var body = document.getElementsByTagName('body')[0]; + var dummy = document.createElement('div'); + var dummyText = document.createTextNode('M'); dummy.appendChild(dummyText); - dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0'); + dummy.setAttribute('style', fontStyle + ';position:absolute;top:0;left:0'); body.appendChild(dummy); result = dummy.offsetHeight; @@ -225,34 +225,34 @@ { // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. - var result = ""; - var lines = text.split("\n"); + var result = ''; + var lines = text.split('\n'); for (var i = 0; i < lines.length; i++) { var spaceLeft = this.style.wordWrapWidth; - var words = lines[i].split(" "); + var words = lines[i].split(' '); for (var j = 0; j < words.length; j++) { var wordWidth = this.context.measureText(words[j]).width; - var wordWidthWithSpace = wordWidth + this.context.measureText(" ").width; + var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if(wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is // greater than the word wrap width. if(j > 0) { - result += "\n"; + result += '\n'; } - result += words[j] + " "; + result += words[j] + ' '; spaceLeft = this.style.wordWrapWidth - wordWidth; } else { spaceLeft -= wordWidthWithSpace; - result += words[j] + " "; + result += words[j] + ' '; } } - result += "\n"; + result += '\n'; } return result; }; diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 6c9a83c..317e4e0 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -69,7 +69,7 @@ { var scope = this; - this.source.onload = function(){ + this.source.onload = function() { scope.hasLoaded = true; scope.width = scope.source.width; @@ -78,7 +78,7 @@ // add it to somewhere... PIXI.texturesToUpdate.push(scope); scope.dispatchEvent( { type: 'loaded', content: scope } ); - } + }; // this.image.src = imageUrl; } } @@ -93,7 +93,7 @@ this.imageUrl = null; this._powerOf2 = false; -} +}; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; @@ -106,17 +106,17 @@ { if(this.source instanceof Image) { - if (this.imageUrl in PIXI.BaseTextureCache) + if (this.imageUrl in PIXI.BaseTextureCache) delete PIXI.BaseTextureCache[this.imageUrl]; this.imageUrl = null; this.source.src = null; } this.source = null; PIXI.texturesToDestroy.push(this); -} +}; /** - * + * * * @method destroy */ @@ -126,7 +126,7 @@ this.hasLoaded = false; this.source.src = null; this.source.src = newSrc; -} +}; /** * Helper function that returns a base texture based on an image url @@ -156,4 +156,4 @@ } return baseTexture; -} +}; diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index c7451df..fe1df38 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -5,11 +5,11 @@ /** A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. - __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded. - Otherwise black rectangles will be drawn instead. - + __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded. + Otherwise black rectangles will be drawn instead. + RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example: - + var renderTexture = new PIXI.RenderTexture(800, 600); var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); sprite.position.x = 800/2; @@ -39,7 +39,7 @@ this.indetityMatrix = PIXI.mat3.create(); - this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); + this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); if(PIXI.gl) { @@ -49,7 +49,7 @@ { this.initCanvas(); } -} +}; PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype ); PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; @@ -68,7 +68,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); this.glFramebuffer.width = this.width; - this.glFramebuffer.height = this.height; + this.glFramebuffer.height = this.height; this.baseTexture = new PIXI.BaseTexture(); @@ -95,7 +95,7 @@ // set the correct render function.. this.render = this.renderWebGL; -} +}; PIXI.RenderTexture.prototype.resize = function(width, height) @@ -103,24 +103,24 @@ this.width = width; this.height = height; - + if(PIXI.gl) { - this.projection.x = this.width/2 - this.projection.y = -this.height/2; - + this.projection.x = this.width / 2; + this.projection.y = -this.height / 2; + var gl = PIXI.gl; gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); } else { - - this.frame.width = this.width + + this.frame.width = this.width; this.frame.height = this.height; this.renderer.resize(this.width, this.height); } -} +}; /** * Initializes the canvas data for this texture @@ -136,7 +136,7 @@ this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); this.render = this.renderCanvas; -} +}; /** * This function will draw the display object to the texture. @@ -151,15 +151,15 @@ var gl = PIXI.gl; // enable the alpha color mask.. - gl.colorMask(true, true, true, true); + gl.colorMask(true, true, true, true); - gl.viewport(0, 0, this.width, this.height); + gl.viewport(0, 0, this.width, this.height); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); if(clear) { - gl.clearColor(0,0,0, 0); + gl.clearColor(0,0,0, 0); gl.clear(gl.COLOR_BUFFER_BIT); } @@ -178,20 +178,20 @@ displayObject.worldTransform[2] = position.x; displayObject.worldTransform[5] -= position.y; } - + PIXI.visibleCount++; displayObject.vcount = PIXI.visibleCount; - + for(var i=0,j=children.length; i this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) { - throw new Error("Texture Error: frame does not fit inside the base Texture dimensions " + this); + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this); } this.updateFrame = true; PIXI.Texture.frameUpdates.push(this); //this.dispatchEvent( { type: 'update', content: this } ); -} +}; /** * Helper function that returns a texture based on an image url @@ -145,7 +145,7 @@ } return texture; -} +}; /** * Helper function that returns a texture based on a frame id @@ -159,9 +159,9 @@ PIXI.Texture.fromFrame = function(frameId) { var texture = PIXI.TextureCache[frameId]; - if(!texture)throw new Error("The frameId '"+ frameId +"' does not exist in the texture cache " + this); + if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache ' + this); return texture; -} +}; /** * Helper function that returns a texture based on a canvas element @@ -176,7 +176,7 @@ { var baseTexture = new PIXI.BaseTexture(canvas); return new PIXI.Texture(baseTexture); -} +}; /** @@ -190,7 +190,7 @@ PIXI.Texture.addTextureToCache = function(texture, id) { PIXI.TextureCache[id] = texture; -} +}; /** * Remove a texture from the textureCache. @@ -202,11 +202,10 @@ */ PIXI.Texture.removeTextureFromCache = function(id) { - var texture = PIXI.TextureCache[id] + var texture = PIXI.TextureCache[id]; PIXI.TextureCache[id] = null; return texture; -} +}; // this is more for webGL.. it contains updated frames.. PIXI.Texture.frameUpdates = []; - diff --git a/src/pixi/utils/Detector.js b/src/pixi/utils/Detector.js index 2bc7d34..535a94f 100644 --- a/src/pixi/utils/Detector.js +++ b/src/pixi/utils/Detector.js @@ -23,14 +23,20 @@ if(!height)height = 600; // BORROWED from Mr Doob (mrdoob.com) - var webgl = ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )(); + var webgl = ( function () { try { + var canvas = document.createElement( 'canvas' ); + return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); + } catch( e ) { + return false; + } + } )(); if(webgl) { - var ie = (navigator.userAgent.toLowerCase().indexOf('msie') != -1); - webgl = !ie; + var ie = (navigator.userAgent.toLowerCase().indexOf('msie') !== -1); + webgl = !ie; } - + //console.log(webgl); if( webgl ) { diff --git a/src/pixi/utils/Polyk.js b/src/pixi/utils/Polyk.js index 0b1a136..8c5d30e 100644 --- a/src/pixi/utils/Polyk.js +++ b/src/pixi/utils/Polyk.js @@ -44,11 +44,12 @@ { var sign = true; - var n = p.length>>1; - if(n<3) return []; + var n = p.length >> 1; + if(n < 3) return []; + var tgs = []; var avl = []; - for(var i=0; i= 0) && (v >= 0) && (u + v < 1); -} +}; /** * Checks if a shape is convex @@ -145,5 +152,5 @@ */ 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; +}; diff --git a/.jshintrc b/.jshintrc index 26492d8..b913f2b 100644 --- a/.jshintrc +++ b/.jshintrc @@ -31,14 +31,17 @@ "unused" : true, // Warn when varaibles are created by not used. "strict" : false, // Require `use strict` pragma in every file. "trailing" : true, // Prohibit trailing whitespaces. - "maxparams" : 6, // Prohibit having more than X number of params in a function. - "maxdepth" : 6, // Prohibit nested blocks from going more than X levels deep. + "maxparams" : 8, // Prohibit having more than X number of params in a function. + "maxdepth" : 8, // Prohibit nested blocks from going more than X levels deep. "maxstatements" : false, // Restrict the number of statements in a function. "maxcomplexity" : false, // Restrict the cyclomatic complexity of the code. "maxlen" : 220, // Require that all lines are 100 characters or less. "globals" : { // Register globals that are used in the code. "module": false, - "require": false + "require": false, + + "PIXI": false, + "spine": false }, // == Relaxing Options ================================================ diff --git a/Gruntfile.js b/Gruntfile.js index a50377c..1952af7 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function(grunt) { grunt.loadNpmTasks('grunt-concat-sourcemap'); grunt.loadNpmTasks('grunt-contrib-concat'); @@ -9,9 +7,7 @@ grunt.loadNpmTasks('grunt-contrib-yuidoc'); grunt.loadTasks('tasks'); - var root = 'src/pixi/', - debug = 'bin/pixi.dev.js', - srcFiles = [ + var srcFiles = [ '<%= dirs.src %>/Intro.js', '<%= dirs.src %>/Pixi.js', '<%= dirs.src %>/core/Point.js', @@ -74,9 +70,9 @@ '<%= dirs.src %>/filters/DotScreenFilter.js', '<%= dirs.src %>/filters/CrossHatchFilter.js', '<%= dirs.src %>/filters/RGBSplitFilter.js', - '<%= dirs.src %>/Outro.js' - ], banner = [ + ], + banner = [ '/**', ' * @license', ' * <%= pkg.name %> - v<%= pkg.version %>', @@ -114,6 +110,7 @@ dest: '<%= files.build %>' } }, + /* jshint -W106 */ concat_sourcemap: { dev: { files: { @@ -125,7 +122,7 @@ } }, jshint: { - src: srcFiles.concat('Gruntfile.js'), + src: srcFiles.filter(function(v) { return v.match(/(Intro|Outro|Spine|Pixi)\.js$/) === null; }).concat('Gruntfile.js'), test: ['<%= files.testBlob %>'], options: { jshintrc: '.jshintrc' @@ -180,4 +177,4 @@ grunt.registerTask('docs', ['yuidoc']); grunt.registerTask('travis', ['test']); -} +}; diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 2f5d349..d1e8055 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -1,7 +1,7 @@ /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - + /** * The interaction manager deals with mouse and touch events. Any DisplayObject can be interactive * This manager also supports multitouch. @@ -12,55 +12,53 @@ */ PIXI.InteractionManager = function(stage) { - /** - * a refference to the stage - * - * @property stage - * @type Stage - */ - this.stage = stage; + /** + * a refference to the stage + * + * @property stage + * @type Stage + */ + this.stage = stage; - /** - * the mouse data - * - * @property mouse - * @type InteractionData - */ - this.mouse = new PIXI.InteractionData(); + /** + * the mouse data + * + * @property mouse + * @type InteractionData + */ + this.mouse = new PIXI.InteractionData(); - /** - * an object that stores current touches (InteractionData) by id reference - * - * @property touchs - * @type Object - */ - this.touchs = {}; + /** + * an object that stores current touches (InteractionData) by id reference + * + * @property touchs + * @type Object + */ + this.touchs = {}; + // helpers + this.tempPoint = new PIXI.Point(); + //this.tempMatrix = mat3.create(); - - // helpers - this.tempPoint = new PIXI.Point(); - //this.tempMatrix = mat3.create(); + this.mouseoverEnabled = true; - this.mouseoverEnabled = true; + //tiny little interactiveData pool! + this.pool = []; - //tiny little interactiveData pool! - this.pool = []; + this.interactiveItems = []; + this.interactionDOMElement = null; - this.interactiveItems = []; - this.interactionDOMElement = null; + //this will make it so that you dont have to call bind all the time + this.onMouseMove = this.onMouseMove.bind( this ); + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseOut = this.onMouseOut.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); - //this will make it so that you dont have to call bind all the time - this.onMouseMove = this.onMouseMove.bind( this ); - this.onMouseDown = this.onMouseDown.bind(this); - this.onMouseOut = this.onMouseOut.bind(this); - this.onMouseUp = this.onMouseUp.bind(this); - - this.onTouchStart = this.onTouchStart.bind(this); - this.onTouchEnd = this.onTouchEnd.bind(this); - this.onTouchMove = this.onTouchMove.bind(this); - this.last = 0; -} + this.onTouchStart = this.onTouchStart.bind(this); + this.onTouchEnd = this.onTouchEnd.bind(this); + this.onTouchMove = this.onTouchMove.bind(this); + this.last = 0; +}; // constructor PIXI.InteractionManager.prototype.constructor = PIXI.InteractionManager; @@ -75,39 +73,39 @@ */ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { - var children = displayObject.children; - var length = children.length; - - /// make an interaction tree... {item.__interactiveParent} - for (var i = length-1; i >= 0; i--) - { - var child = children[i]; - -// if(child.visible) { - // push all interactive bits - if(child.interactive) - { - iParent.interactiveChildren = true; - //child.__iParent = iParent; - this.interactiveItems.push(child); + var children = displayObject.children; + var length = children.length; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, child); - } - } - else - { - child.__iParent = null; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) + { + var child = children[i]; - if(child.children.length > 0) - { - this.collectInteractiveSprite(child, iParent); - } - } -// } - } -} +// if(child.visible) { + // push all interactive bits + if(child.interactive) + { + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } + } + else + { + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } + } +// } + } +}; /** * Sets the target for event delegation @@ -118,16 +116,16 @@ */ PIXI.InteractionManager.prototype.setTarget = function(target) { - this.target = target; + this.target = target; - //check if the dom element has been set. If it has don't do anything - if( this.interactionDOMElement === null ) { + //check if the dom element has been set. If it has don't do anything + if( this.interactionDOMElement === null ) { - this.setTargetDomElement( target.view ); - } + this.setTargetDomElement( target.view ); + } - document.body.addEventListener('mouseup', this.onMouseUp, true); -} + document.body.addEventListener('mouseup', this.onMouseUp, true); +}; /** @@ -141,44 +139,43 @@ */ PIXI.InteractionManager.prototype.setTargetDomElement = function(domElement) { - //remove previouse listeners - if( this.interactionDOMElement !== null ) - { - this.interactionDOMElement.style['-ms-content-zooming'] = ''; - this.interactionDOMElement.style['-ms-touch-action'] = ''; + //remove previouse listeners + if( this.interactionDOMElement !== null ) + { + this.interactionDOMElement.style['-ms-content-zooming'] = ''; + this.interactionDOMElement.style['-ms-touch-action'] = ''; - this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); - this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); - this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement.removeEventListener('mousemove', this.onMouseMove, true); + this.interactionDOMElement.removeEventListener('mousedown', this.onMouseDown, true); + this.interactionDOMElement.removeEventListener('mouseout', this.onMouseOut, true); - // aint no multi touch just yet! - this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); - this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); - this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); - } + // aint no multi touch just yet! + this.interactionDOMElement.removeEventListener('touchstart', this.onTouchStart, true); + this.interactionDOMElement.removeEventListener('touchend', this.onTouchEnd, true); + this.interactionDOMElement.removeEventListener('touchmove', this.onTouchMove, true); + } - if (window.navigator.msPointerEnabled) - { - // time to remove some of that zoom in ja.. - domElement.style['-ms-content-zooming'] = 'none'; - domElement.style['-ms-touch-action'] = 'none'; - - // DO some window specific touch! - } + if (window.navigator.msPointerEnabled) + { + // time to remove some of that zoom in ja.. + domElement.style['-ms-content-zooming'] = 'none'; + domElement.style['-ms-touch-action'] = 'none'; - this.interactionDOMElement = domElement; + // DO some window specific touch! + } - domElement.addEventListener('mousemove', this.onMouseMove, true); - domElement.addEventListener('mousedown', this.onMouseDown, true); - domElement.addEventListener('mouseout', this.onMouseOut, true); + this.interactionDOMElement = domElement; - // aint no multi touch just yet! - domElement.addEventListener('touchstart', this.onTouchStart, true); - domElement.addEventListener('touchend', this.onTouchEnd, true); - domElement.addEventListener('touchmove', this.onTouchMove, true); -} + domElement.addEventListener('mousemove', this.onMouseMove, true); + domElement.addEventListener('mousedown', this.onMouseDown, true); + domElement.addEventListener('mouseout', this.onMouseOut, true); + // aint no multi touch just yet! + domElement.addEventListener('touchstart', this.onTouchStart, true); + domElement.addEventListener('touchend', this.onTouchEnd, true); + domElement.addEventListener('touchmove', this.onTouchMove, true); +}; /** * updates the state of interactive objects @@ -188,85 +185,86 @@ */ PIXI.InteractionManager.prototype.update = function() { - if(!this.target)return; - - // frequency of 30fps?? - var now = Date.now(); - var diff = now - this.last; - diff = (diff * 30) / 1000; - if(diff < 1)return; - this.last = now; - // - - // ok.. so mouse events?? - // yes for now :) - // OPTIMSE - how often to check?? - if(this.dirty) - { - this.dirty = false; - - var len = this.interactiveItems.length; - - for (var i=0; i < len; i++) { - this.interactiveItems[i].interactiveChildren = false; - } - - this.interactiveItems = []; - - if(this.stage.interactive)this.interactiveItems.push(this.stage); - // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage, this.stage); - } - - // loop through interactive objects! - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - - //if(!item.visible)continue; - - // OPTIMISATION - only calculate every time if the mousemove function exists.. - // OK so.. does the object have any other interactive functions? - // hit-test the clip! - - - if(item.mouseover || item.mouseout || item.buttonMode) - { - // ok so there are some functions so lets hit test it.. - item.__hit = this.hitTest(item, this.mouse); - this.mouse.target = item; - // ok so deal with interactions.. - // loks like there was a hit! - if(item.__hit) - { - if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; - - if(!item.__isOver) - { - - if(item.mouseover)item.mouseover(this.mouse); - item.__isOver = true; - } - } - else - { - if(item.__isOver) - { - // roll out! - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } - } - - // ---> - } -} + if(!this.target)return; + + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + var i = 0; + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? + if(this.dirty) + { + this.dirty = false; + + var len = this.interactiveItems.length; + + for (i = 0; i < len; i++) { + this.interactiveItems[i].interactiveChildren = false; + } + + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); + // go through and collect all the objects that are interactive.. + this.collectInteractiveSprite(this.stage, this.stage); + } + + // loop through interactive objects! + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + + //if(!item.visible)continue; + + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + + + if(item.mouseover || item.mouseout || item.buttonMode) + { + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + this.mouse.target = item; + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) + { + if(item.buttonMode) this.interactionDOMElement.style.cursor = item.defaultCursor; + + if(!item.__isOver) + { + + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } + } + // ---> + } +}; /** * Is called when the mouse moves accross the renderer element @@ -277,28 +275,26 @@ */ PIXI.InteractionManager.prototype.onMouseMove = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - // TODO optimize by not check EVERY TIME! maybe half as often? // - var rect = this.interactionDOMElement.getBoundingClientRect(); - - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - - var length = this.interactiveItems.length; - var global = this.mouse.global; - - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousemove) - { - //call the function! - item.mousemove(this.mouse); - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + // TODO optimize by not check EVERY TIME! maybe half as often? // + var rect = this.interactionDOMElement.getBoundingClientRect(); + + this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); + this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousemove) + { + //call the function! + item.mousemove(this.mouse); + } + } +}; /** * Is called when the mouse button is pressed down on the renderer element @@ -309,61 +305,57 @@ */ PIXI.InteractionManager.prototype.onMouseDown = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - // loop through inteaction tree... - // hit test each item! -> - // get interactive items under point?? - //stage.__i - var length = this.interactiveItems.length; - var global = this.mouse.global; - - var index = 0; - var parent = this.stage; - - // while - // hit test - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mousedown || item.click) - { - item.__mouseIsDown = true; - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit) - { - //call the function! - if(item.mousedown)item.mousedown(this.mouse); - item.__isDown = true; - - // just the one! - if(!item.interactiveChildren)break; - } - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + // loop through inteaction tree... + // hit test each item! -> + // get interactive items under point?? + //stage.__i + var length = this.interactiveItems.length; + + // while + // hit test + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } + } +}; -PIXI.InteractionManager.prototype.onMouseOut = function(event) +PIXI.InteractionManager.prototype.onMouseOut = function() { - var length = this.interactiveItems.length; - - this.interactionDOMElement.style.cursor = "inherit"; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.__isOver) - { - this.mouse.target = item; - if(item.mouseout)item.mouseout(this.mouse); - item.__isOver = false; - } - } -} + var length = this.interactiveItems.length; + + this.interactionDOMElement.style.cursor = 'inherit'; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.__isOver) + { + this.mouse.target = item; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } + } +}; /** * Is called when the mouse button is released on the renderer element @@ -374,48 +366,45 @@ */ PIXI.InteractionManager.prototype.onMouseUp = function(event) { - this.mouse.originalEvent = event || window.event; //IE uses window.event - - var global = this.mouse.global; - - - var length = this.interactiveItems.length; - var up = false; - - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - - if(item.mouseup || item.mouseupoutside || item.click) - { - item.__hit = this.hitTest(item, this.mouse); - - if(item.__hit && !up) - { - //call the function! - if(item.mouseup) - { - item.mouseup(this.mouse); - } - if(item.__isDown) - { - if(item.click)item.click(this.mouse); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.mouseupoutside)item.mouseupoutside(this.mouse); - } - } - - item.__isDown = false; - } - } -} + this.mouse.originalEvent = event || window.event; //IE uses window.event + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } + } +}; /** * Tests if the current mouse coords hit a sprite @@ -427,68 +416,68 @@ */ PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) { - var global = interactionData.global; - - if(item.vcount !== PIXI.visibleCount)return false; + var global = interactionData.global; - var isSprite = (item instanceof PIXI.Sprite), - worldTransform = item.worldTransform, - a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10), - x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + if(item.vcount !== PIXI.visibleCount)return false; - interactionData.target = item; - - //a sprite or display object with a hit area defined - if(item.hitArea && item.hitArea.contains) { - if(item.hitArea.contains(x, y)) { - //if(isSprite) - interactionData.target = item; + var isSprite = (item instanceof PIXI.Sprite), + worldTransform = item.worldTransform, + a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10), + x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - return true; - } - - return false; - } - // a sprite with no hitarea defined - else if(isSprite) - { - var width = item.texture.frame.width, - height = item.texture.frame.height, - x1 = -width * item.anchor.x, - y1; - - if(x > x1 && x < x1 + width) - { - y1 = -height * item.anchor.y; - - if(y > y1 && y < y1 + height) - { - // set the target property if a hit is true! - interactionData.target = item - return true; - } - } - } + interactionData.target = item; - var length = item.children.length; - - for (var i = 0; i < length; i++) - { - var tempItem = item.children[i]; - var hit = this.hitTest(tempItem, interactionData); - if(hit) - { - // hmm.. TODO SET CORRECT TARGET? - interactionData.target = item - return true; - } - } + //a sprite or display object with a hit area defined + if(item.hitArea && item.hitArea.contains) { + if(item.hitArea.contains(x, y)) { + //if(isSprite) + interactionData.target = item; - return false; -} + return true; + } + + return false; + } + // a sprite with no hitarea defined + else if(isSprite) + { + var width = item.texture.frame.width, + height = item.texture.frame.height, + x1 = -width * item.anchor.x, + y1; + + if(x > x1 && x < x1 + width) + { + y1 = -height * item.anchor.y; + + if(y > y1 && y < y1 + height) + { + // set the target property if a hit is true! + interactionData.target = item; + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var tempItem = item.children[i]; + var hit = this.hitTest(tempItem, interactionData); + if(hit) + { + // hmm.. TODO SET CORRECT TARGET? + interactionData.target = item; + return true; + } + } + + return false; +}; /** * Is called when a touch is moved accross the renderer element @@ -499,27 +488,30 @@ */ PIXI.InteractionManager.prototype.onTouchMove = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - touchData.originalEvent = event || window.event; - - // update the touch position - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - } - - var length = this.interactiveItems.length; - for (var i = 0; i < length; i++) - { - var item = this.interactiveItems[i]; - if(item.touchmove)item.touchmove(touchData); - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + var touchData; + var i = 0; + + for (i = 0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + touchData = this.touchs[touchEvent.identifier]; + touchData.originalEvent = event || window.event; + + // update the touch position + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + } + + var length = this.interactiveItems.length; + for (i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove) + item.touchmove(touchData); + } +}; /** * Is called when a touch is started on the renderer element @@ -530,45 +522,45 @@ */ PIXI.InteractionManager.prototype.onTouchStart = function(event) { - var rect = this.interactionDOMElement.getBoundingClientRect(); - - var changedTouches = event.changedTouches; - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - - var touchData = this.pool.pop(); - if(!touchData)touchData = new PIXI.InteractionData(); - - touchData.originalEvent = event || window.event; - - this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - - if(item.touchstart || item.tap) - { - item.__hit = this.hitTest(item, touchData); - - if(item.__hit) - { - //call the function! - if(item.touchstart)item.touchstart(touchData); - item.__isDown = true; - item.__touchData = touchData; - - if(!item.interactiveChildren)break; - } - } - } - } -} + var rect = this.interactionDOMElement.getBoundingClientRect(); + + var changedTouches = event.changedTouches; + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + + var touchData = this.pool.pop(); + if(!touchData)touchData = new PIXI.InteractionData(); + + touchData.originalEvent = event || window.event; + + this.touchs[touchEvent.identifier] = touchData; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + item.__touchData = touchData; + + if(!item.interactiveChildren)break; + } + } + } + } +}; /** * Is called when a touch is ended on the renderer element @@ -579,67 +571,69 @@ */ PIXI.InteractionManager.prototype.onTouchEnd = function(event) { - //this.mouse.originalEvent = event || window.event; //IE uses window.event - var rect = this.interactionDOMElement.getBoundingClientRect(); - var changedTouches = event.changedTouches; - - for (var i=0; i < changedTouches.length; i++) - { - var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; - var up = false; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); - touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - - var length = this.interactiveItems.length; - for (var j = 0; j < length; j++) - { - var item = this.interactiveItems[j]; - var itemTouchData = item.__touchData; // <-- Here! - item.__hit = this.hitTest(item, touchData); - - if(itemTouchData == touchData) - { - // so this one WAS down... - touchData.originalEvent = event || window.event; - // hitTest?? - - if(item.touchend || item.tap) - { - if(item.__hit && !up) - { - if(item.touchend)item.touchend(touchData); - if(item.__isDown) - { - if(item.tap)item.tap(touchData); - } - - if(!item.interactiveChildren)up = true; - } - else - { - if(item.__isDown) - { - if(item.touchendoutside)item.touchendoutside(touchData); - } - } - - item.__isDown = false; - } - - item.__touchData = null; - - } - else - { - - } - } - // remove the touch.. - this.pool.push(touchData); - this.touchs[touchEvent.identifier] = null; - } -} + //this.mouse.originalEvent = event || window.event; //IE uses window.event + var rect = this.interactionDOMElement.getBoundingClientRect(); + var changedTouches = event.changedTouches; + + for (var i=0; i < changedTouches.length; i++) + { + var touchEvent = changedTouches[i]; + var touchData = this.touchs[touchEvent.identifier]; + var up = false; + touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); + touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); + + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) + { + var item = this.interactiveItems[j]; + var itemTouchData = item.__touchData; // <-- Here! + item.__hit = this.hitTest(item, touchData); + + if(itemTouchData === touchData) + { + // so this one WAS down... + touchData.originalEvent = event || window.event; + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchData = null; + + } + /* + else + { + + } + */ + } + // remove the touch.. + this.pool.push(touchData); + this.touchs[touchEvent.identifier] = null; + } +}; /** * Holds all information related to an Interaction event @@ -649,33 +643,33 @@ */ PIXI.InteractionData = function() { - /** - * This point stores the global coords of where the touch/mouse event happened - * - * @property global - * @type Point - */ - this.global = new PIXI.Point(); - - // this is here for legacy... but will remove - this.local = new PIXI.Point(); + /** + * This point stores the global coords of where the touch/mouse event happened + * + * @property global + * @type Point + */ + this.global = new PIXI.Point(); - /** - * The target Sprite that was interacted with - * - * @property target - * @type Sprite - */ - this.target; + // this is here for legacy... but will remove + this.local = new PIXI.Point(); - /** - * When passed to an event handler, this will be the original DOM Event that was captured - * - * @property originalEvent - * @type Event - */ - this.originalEvent; -} + /** + * The target Sprite that was interacted with + * + * @property target + * @type Sprite + */ + this.target = null; + + /** + * When passed to an event handler, this will be the original DOM Event that was captured + * + * @property originalEvent + * @type Event + */ + this.originalEvent = null; +}; /** * This will return the local coords of the specified displayObject for this InteractionData @@ -686,17 +680,17 @@ */ PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) { - var worldTransform = displayObject.worldTransform; - var global = this.global; - - // do a cheeky transform to get the mouse coords; - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], id = 1 / (a00 * a11 + a01 * -a10); - // set the mouse coords... - return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, - a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) -} + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id); +}; // constructor PIXI.InteractionData.prototype.constructor = PIXI.InteractionData; diff --git a/src/pixi/core/Circle.js b/src/pixi/core/Circle.js index e272833..d172461 100644 --- a/src/pixi/core/Circle.js +++ b/src/pixi/core/Circle.js @@ -33,7 +33,7 @@ * @default 0 */ this.radius = radius || 0; -} +}; /** * Creates a clone of this Circle instance @@ -44,7 +44,7 @@ PIXI.Circle.prototype.clone = function() { return new PIXI.Circle(this.x, this.y, this.radius); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this circle @@ -67,7 +67,7 @@ dy *= dy; return (dx + dy <= r2); -} +}; // constructor PIXI.Circle.prototype.constructor = PIXI.Circle; diff --git a/src/pixi/core/Ellipse.js b/src/pixi/core/Ellipse.js index eef1059..7a9c2f6 100644 --- a/src/pixi/core/Ellipse.js +++ b/src/pixi/core/Ellipse.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Ellipse instance @@ -52,7 +52,7 @@ PIXI.Ellipse.prototype.clone = function() { return new PIXI.Ellipse(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this ellipse @@ -76,12 +76,12 @@ normy *= normy; return (normx + normy < 0.25); -} +}; PIXI.Ellipse.prototype.getBounds = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; // constructor PIXI.Ellipse.prototype.constructor = PIXI.Ellipse; diff --git a/src/pixi/core/Matrix.js b/src/pixi/core/Matrix.js index b2760c0..1f5a67a 100644 --- a/src/pixi/core/Matrix.js +++ b/src/pixi/core/Matrix.js @@ -29,7 +29,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat3.identity = function(matrix) @@ -45,7 +45,7 @@ matrix[8] = 1; return matrix; -} +}; PIXI.mat4 = {}; @@ -72,7 +72,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat3.multiply = function (mat, mat2, dest) { @@ -100,7 +100,7 @@ dest[8] = b20 * a02 + b21 * a12 + b22 * a22; return dest; -} +}; PIXI.mat3.clone = function(mat) { @@ -117,7 +117,7 @@ matrix[8] = mat[8]; return matrix; -} +}; PIXI.mat3.transpose = function (mat, dest) { @@ -145,7 +145,7 @@ dest[7] = mat[5]; dest[8] = mat[8]; return dest; -} +}; PIXI.mat3.toMat4 = function (mat, dest) { @@ -172,7 +172,7 @@ dest[0] = mat[0]; return dest; -} +}; ///// @@ -200,7 +200,7 @@ matrix[15] = 1; return matrix; -} +}; PIXI.mat4.transpose = function (mat, dest) { @@ -243,7 +243,7 @@ dest[14] = mat[11]; dest[15] = mat[15]; return dest; -} +}; PIXI.mat4.multiply = function (mat, mat2, dest) { @@ -290,4 +290,4 @@ dest[15] = b0*a03 + b1*a13 + b2*a23 + b3*a33; return dest; -} +}; diff --git a/src/pixi/core/Point.js b/src/pixi/core/Point.js index b1f9cd2..c7e2772 100644 --- a/src/pixi/core/Point.js +++ b/src/pixi/core/Point.js @@ -25,7 +25,7 @@ * @default 0 */ this.y = y || 0; -} +}; /** * Creates a clone of this point @@ -36,7 +36,7 @@ PIXI.Point.prototype.clone = function() { return new PIXI.Point(this.x, this.y); -} +}; // constructor PIXI.Point.prototype.constructor = PIXI.Point; diff --git a/src/pixi/core/Polygon.js b/src/pixi/core/Polygon.js index 445882e..4887f6c 100644 --- a/src/pixi/core/Polygon.js +++ b/src/pixi/core/Polygon.js @@ -30,7 +30,7 @@ } this.points = points; -} +}; /** * Creates a clone of this polygon @@ -46,7 +46,7 @@ } return new PIXI.Polygon(points); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this polygon @@ -65,13 +65,13 @@ for(var i = 0, j = this.points.length - 1; i < this.points.length; j = i++) { var xi = this.points[i].x, yi = this.points[i].y, xj = this.points[j].x, yj = this.points[j].y, - intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); + intersect = ((yi > y) !== (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if(intersect) inside = !inside; } return inside; -} +}; // constructor PIXI.Polygon.prototype.constructor = PIXI.Polygon; diff --git a/src/pixi/core/Rectangle.js b/src/pixi/core/Rectangle.js index b9c6c4e..70390a1 100644 --- a/src/pixi/core/Rectangle.js +++ b/src/pixi/core/Rectangle.js @@ -41,7 +41,7 @@ * @default 0 */ this.height = height || 0; -} +}; /** * Creates a clone of this Rectangle @@ -52,7 +52,7 @@ PIXI.Rectangle.prototype.clone = function() { return new PIXI.Rectangle(this.x, this.y, this.width, this.height); -} +}; /** * Checks if the x, and y coords passed to this function are contained within this Rectangle @@ -79,7 +79,7 @@ } return false; -} +}; // constructor PIXI.Rectangle.prototype.constructor = PIXI.Rectangle; diff --git a/src/pixi/display/DisplayObject.js b/src/pixi/display/DisplayObject.js index df5e898..53cce04 100644 --- a/src/pixi/display/DisplayObject.js +++ b/src/pixi/display/DisplayObject.js @@ -10,238 +10,238 @@ */ PIXI.DisplayObject = function() { - this.last = this; - this.first = this; - /** - * The coordinate of the object relative to the local coordinates of the parent. - * - * @property position - * @type Point - */ - this.position = new PIXI.Point(); + this.last = this; + this.first = this; + /** + * The coordinate of the object relative to the local coordinates of the parent. + * + * @property position + * @type Point + */ + this.position = new PIXI.Point(); - /** - * The scale factor of the object. - * - * @property scale - * @type Point - */ - this.scale = new PIXI.Point(1,1);//{x:1, y:1}; + /** + * The scale factor of the object. + * + * @property scale + * @type Point + */ + this.scale = new PIXI.Point(1,1);//{x:1, y:1}; - /** - * The pivot point of the displayObject that it rotates around - * - * @property pivot - * @type Point - */ - this.pivot = new PIXI.Point(0,0); + /** + * The pivot point of the displayObject that it rotates around + * + * @property pivot + * @type Point + */ + this.pivot = new PIXI.Point(0,0); - /** - * The rotation of the object in radians. - * - * @property rotation - * @type Number - */ - this.rotation = 0; + /** + * The rotation of the object in radians. + * + * @property rotation + * @type Number + */ + this.rotation = 0; - /** - * The opacity of the object. - * - * @property alpha - * @type Number - */ - this.alpha = 1; + /** + * The opacity of the object. + * + * @property alpha + * @type Number + */ + this.alpha = 1; - /** - * The visibility of the object. - * - * @property visible - * @type Boolean - */ - this.visible = true; + /** + * The visibility of the object. + * + * @property visible + * @type Boolean + */ + this.visible = true; - /** - * This is the defined area that will pick up mouse / touch events. It is null by default. - * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) - * - * @property hitArea - * @type Rectangle|Circle|Ellipse|Polygon - */ - this.hitArea = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * + * @property hitArea + * @type Rectangle|Circle|Ellipse|Polygon + */ + this.hitArea = null; - /** - * This is used to indicate if the displayObject should display a mouse hand cursor on rollover - * - * @property buttonMode - * @type Boolean - */ - this.buttonMode = false; + /** + * This is used to indicate if the displayObject should display a mouse hand cursor on rollover + * + * @property buttonMode + * @type Boolean + */ + this.buttonMode = false; - /** - * Can this object be rendered - * - * @property renderable - * @type Boolean - */ - this.renderable = false; + /** + * Can this object be rendered + * + * @property renderable + * @type Boolean + */ + this.renderable = false; - /** - * [read-only] The display object container that contains this display object. - * - * @property parent - * @type DisplayObjectContainer - * @readOnly - */ - this.parent = null; + /** + * [read-only] The display object container that contains this display object. + * + * @property parent + * @type DisplayObjectContainer + * @readOnly + */ + this.parent = null; - /** - * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. - * - * @property stage - * @type Stage - * @readOnly - */ - this.stage = null; + /** + * [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage. + * + * @property stage + * @type Stage + * @readOnly + */ + this.stage = null; - /** - * [read-only] The multiplied alpha of the displayobject - * - * @property worldAlpha - * @type Number - * @readOnly - */ - this.worldAlpha = 1; + /** + * [read-only] The multiplied alpha of the displayobject + * + * @property worldAlpha + * @type Number + * @readOnly + */ + this.worldAlpha = 1; - /** - * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property - * - * @property _interactive - * @type Boolean - * @readOnly - * @private - */ - this._interactive = false; + /** + * [read-only] Whether or not the object is interactive, do not toggle directly! use the `interactive` property + * + * @property _interactive + * @type Boolean + * @readOnly + * @private + */ + this._interactive = false; - this.defaultCursor = "pointer"; - - /** - * [read-only] Current transform of the object based on world (parent) factors - * - * @property worldTransform - * @type Mat3 - * @readOnly - * @private - */ - this.worldTransform = PIXI.mat3.create()//mat3.identity(); + this.defaultCursor = 'pointer'; - /** - * [read-only] Current transform of the object locally - * - * @property localTransform - * @type Mat3 - * @readOnly - * @private - */ - this.localTransform = PIXI.mat3.create()//mat3.identity(); + /** + * [read-only] Current transform of the object based on world (parent) factors + * + * @property worldTransform + * @type Mat3 + * @readOnly + * @private + */ + this.worldTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Unkown - * - * @property color - * @type Array<> - * @private - */ - this.color = []; + /** + * [read-only] Current transform of the object locally + * + * @property localTransform + * @type Mat3 + * @readOnly + * @private + */ + this.localTransform = PIXI.mat3.create(); //mat3.identity(); - /** - * [NYI] Holds whether or not this object is dynamic, for rendering optimization - * - * @property dynamic - * @type Boolean - * @private - */ - this.dynamic = true; + /** + * [NYI] Unkown + * + * @property color + * @type Array<> + * @private + */ + this.color = []; - // chach that puppy! - this._sr = 0; - this._cr = 1; + /** + * [NYI] Holds whether or not this object is dynamic, for rendering optimization + * + * @property dynamic + * @type Boolean + * @private + */ + this.dynamic = true; + + // chach that puppy! + this._sr = 0; + this._cr = 1; - this.filterArea = new PIXI.Rectangle(0,0,1,1); - - /* - * MOUSE Callbacks - */ + this.filterArea = new PIXI.Rectangle(0,0,1,1); - /** - * A callback that is used when the users clicks on the displayObject with their mouse - * @method click - * @param interactionData {InteractionData} - */ + /* + * MOUSE Callbacks + */ - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject - * for this callback to be fired the mouse must have been pressed down over the displayObject - * @method mouseup - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject - * for this callback to be fired, The touch must have started over the displayObject - * @method mouseupoutside - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse rolls over the displayObject - * @method mouseover - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the users mouse leaves the displayObject - * @method mouseout - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ - /* - * TOUCH Callbacks - */ + /* + * TOUCH Callbacks + */ - /** - * A callback that is used when the users taps on the sprite with their finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user touch's over the displayObject - * @method touchstart - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases a touch over the displayObject - * @method touchend - * @param interactionData {InteractionData} - */ + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ - /** - * A callback that is used when the user releases the touch that was over the displayObject - * for this callback to be fired, The touch must have started over the sprite - * @method touchendoutside - * @param interactionData {InteractionData} - */ -} + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ +}; // constructor PIXI.DisplayObject.prototype.constructor = PIXI.DisplayObject; @@ -256,8 +256,8 @@ */ PIXI.DisplayObject.prototype.setInteractive = function(interactive) { - this.interactive = interactive; -} + this.interactive = interactive; +}; /** * Indicates if the sprite will have touch and mouse interactivity. It is false by default @@ -271,11 +271,11 @@ return this._interactive; }, set: function(value) { - this._interactive = value; - - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; + this._interactive = value; + + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; } }); @@ -292,33 +292,33 @@ return this._mask; }, set: function(value) { - - + + if(value) { - if(this._mask) - { - value.start = this._mask.start; - value.end = this._mask.end; - } - else - { - this.addFilter(value); - value.renderable = false; - } + if(this._mask) + { + value.start = this._mask.start; + value.end = this._mask.end; + } + else + { + this.addFilter(value); + value.renderable = false; + } } else { - this.removeFilter(this._mask); - this._mask.renderable = true; + this.removeFilter(this._mask); + this._mask.renderable = true; } - + this._mask = value; } }); /** - * Sets the filters for the displayObject. + * Sets the filters for the displayObject. * * IMPORTANT: This is a webGL only feature and will be ignored by the canvas renderer. * To remove filters simply set this property to 'null' * @property filters @@ -329,35 +329,33 @@ return this._filters; }, set: function(value) { - + if(value) { - if(this._filters)this.removeFilter(this._filters); - this.addFilter(value); + if(this._filters)this.removeFilter(this._filters); + this.addFilter(value); - // now put all the passes in one place.. - var passes = []; - for (var i = 0; i < value.length; i++) - { - var filterPasses = value[i].passes; - for (var j = 0; j < filterPasses.length; j++) - { - passes.push(filterPasses[j]); - }; - }; + // now put all the passes in one place.. + var passes = []; + for (var i = 0; i < value.length; i++) + { + var filterPasses = value[i].passes; + for (var j = 0; j < filterPasses.length; j++) + { + passes.push(filterPasses[j]); + } + } - value.start.filterPasses = passes; + value.start.filterPasses = passes; } else { - if(this._filters)this.removeFilter(this._filters); + if(this._filters) { + this.removeFilter(this._filters); + } } - + this._filters = value; - - - - } }); @@ -370,101 +368,99 @@ */ PIXI.DisplayObject.prototype.addFilter = function(data) { - //if(this.filter)return; - //this.filter = true; -// data[0].target = this; - + //if(this.filter)return; + //this.filter = true; +// data[0].target = this; - // insert a filter block.. - // TODO Onject pool thease bad boys.. - var start = new PIXI.FilterBlock(); - var end = new PIXI.FilterBlock(); - - data.start = start; - data.end = end; - - start.data = data; - end.data = data; - - start.first = start.last = this; - end.first = end.last = this; - - start.open = true; - - start.target = this; - - /* - * insert start - */ - - var childFirst = start - var childLast = start - var nextObject; - var previousObject; - - previousObject = this.first._iPrev; - - if(previousObject) - { - nextObject = previousObject._iNext; - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - } - else - { - nextObject = this; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - - // now insert the end filter block.. - - /* - * insert end filter - */ - var childFirst = end - var childLast = end - var nextObject = null; - var previousObject = null; - - previousObject = this.last; - nextObject = previousObject._iNext; - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; - - var updateLast = this; - - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = end; - } - updateLast = updateLast.parent; - } - - this.first = start; - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.addFilterBlocks(start, end); - } - -} + + // insert a filter block.. + // TODO Onject pool thease bad boys.. + var start = new PIXI.FilterBlock(); + var end = new PIXI.FilterBlock(); + + data.start = start; + data.end = end; + + start.data = data; + end.data = data; + + start.first = start.last = this; + end.first = end.last = this; + + start.open = true; + + start.target = this; + + /* + * insert start + */ + + var childFirst = start; + var childLast = start; + var nextObject; + var previousObject; + + previousObject = this.first._iPrev; + + if(previousObject) + { + nextObject = previousObject._iNext; + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + } + else + { + nextObject = this; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + // now insert the end filter block.. + + /* + * insert end filter + */ + childFirst = end; + childLast = end; + nextObject = null; + previousObject = null; + + previousObject = this.last; + nextObject = previousObject._iNext; + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + var updateLast = this; + + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = end; + } + updateLast = updateLast.parent; + } + + this.first = start; + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.addFilterBlocks(start, end); + } +}; /* * Removes the filter to this displayObject @@ -474,47 +470,47 @@ */ PIXI.DisplayObject.prototype.removeFilter = function(data) { - //if(!this.filter)return; - //this.filter = false; - // console.log("YUOIO") - // modify the list.. - var startBlock = data.start; - - - var nextObject = startBlock._iNext; - var previousObject = startBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - if(previousObject)previousObject._iNext = nextObject; - - this.first = startBlock._iNext; - - // remove the end filter - var lastBlock = data.end; - - var nextObject = lastBlock._iNext; - var previousObject = lastBlock._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - // this is always true too! - var tempLast = lastBlock._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - while(updateLast.last == lastBlock) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - } - - // if webGL... - if(this.__renderGroup) - { - this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); - } -} + //if(!this.filter)return; + //this.filter = false; + // console.log('YUOIO') + // modify the list.. + var startBlock = data.start; + + + var nextObject = startBlock._iNext; + var previousObject = startBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + if(previousObject)previousObject._iNext = nextObject; + + this.first = startBlock._iNext; + + // remove the end filter + var lastBlock = data.end; + + nextObject = lastBlock._iNext; + previousObject = lastBlock._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + // this is always true too! + var tempLast = lastBlock._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + while(updateLast.last === lastBlock) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + } + + // if webGL... + if(this.__renderGroup) + { + this.__renderGroup.removeFilterBlocks(startBlock, lastBlock); + } +}; /* * Updates the object transform for rendering @@ -524,28 +520,28 @@ */ PIXI.DisplayObject.prototype.updateTransform = function() { - // TODO OPTIMIZE THIS!! with dirty - if(this.rotation !== this.rotationCache) - { - this.rotationCache = this.rotation; - this._sr = Math.sin(this.rotation); - this._cr = Math.cos(this.rotation); - } - - var localTransform = this.localTransform; - var parentTransform = this.parent.worldTransform; - var worldTransform = this.worldTransform; - //console.log(localTransform) - localTransform[0] = this._cr * this.scale.x; - localTransform[1] = -this._sr * this.scale.y - localTransform[3] = this._sr * this.scale.x; - localTransform[4] = this._cr * this.scale.y; - - // TODO --> do we even need a local matrix??? - - var px = this.pivot.x; - var py = this.pivot.y; - + // TODO OPTIMIZE THIS!! with dirty + if(this.rotation !== this.rotationCache) + { + this.rotationCache = this.rotation; + this._sr = Math.sin(this.rotation); + this._cr = Math.cos(this.rotation); + } + + var localTransform = this.localTransform; + var parentTransform = this.parent.worldTransform; + var worldTransform = this.worldTransform; + //console.log(localTransform) + localTransform[0] = this._cr * this.scale.x; + localTransform[1] = -this._sr * this.scale.y; + localTransform[3] = this._sr * this.scale.x; + localTransform[4] = this._cr * this.scale.y; + + // TODO --> do we even need a local matrix??? + + var px = this.pivot.x; + var py = this.pivot.y; + // Cache the matrix values (makes for huge speed increases!) var a00 = localTransform[0], a01 = localTransform[1], a02 = this.position.x - localTransform[0] * px - py * localTransform[1], a10 = localTransform[3], a11 = localTransform[4], a12 = this.position.y - localTransform[4] * py - px * localTransform[3], @@ -553,9 +549,9 @@ b00 = parentTransform[0], b01 = parentTransform[1], b02 = parentTransform[2], b10 = parentTransform[3], b11 = parentTransform[4], b12 = parentTransform[5]; - localTransform[2] = a02 - localTransform[5] = a12 - + localTransform[2] = a02; + localTransform[5] = a12; + worldTransform[0] = b00 * a00 + b01 * a10; worldTransform[1] = b00 * a01 + b01 * a11; worldTransform[2] = b00 * a02 + b01 * a12 + b02; @@ -564,12 +560,11 @@ worldTransform[4] = b10 * a01 + b11 * a11; worldTransform[5] = b10 * a02 + b11 * a12 + b12; - // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! - // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); - this.worldAlpha = this.alpha * this.parent.worldAlpha; - - this.vcount = PIXI.visibleCount; + // because we are using affine transformation, we can optimise the matrix concatenation process.. wooo! + // mat3.multiply(this.localTransform, this.parent.worldTransform, this.worldTransform); + this.worldAlpha = this.alpha * this.parent.worldAlpha; -} + this.vcount = PIXI.visibleCount; +}; PIXI.visibleCount = 0; \ No newline at end of file diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js index eb95624..9f32a51 100644 --- a/src/pixi/display/DisplayObjectContainer.js +++ b/src/pixi/display/DisplayObjectContainer.js @@ -7,23 +7,23 @@ * A DisplayObjectContainer represents a collection of display objects. * It is the base class of all display objects that act as a container for other objects. * - * @class DisplayObjectContainer + * @class DisplayObjectContainer * @extends DisplayObject * @constructor */ PIXI.DisplayObjectContainer = function() { - PIXI.DisplayObject.call( this ); - - /** - * [read-only] The of children of this container. - * - * @property children - * @type Array - * @readOnly - */ - this.children = []; -} + PIXI.DisplayObject.call( this ); + + /** + * [read-only] The of children of this container. + * + * @property children + * @type Array + * @readOnly + */ + this.children = []; +}; // constructor PIXI.DisplayObjectContainer.prototype = Object.create( PIXI.DisplayObject.prototype ); @@ -37,85 +37,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChild = function(child) { - if(child.parent != undefined) - { - - //// COULD BE THIS??? - child.parent.removeChild(child); - // return; - } + if(child.parent !== undefined) + { - child.parent = this; - - this.children.push(child); - - // update the stage refference.. - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // LINKED LIST // - - // modify the list.. - var childFirst = child.first - var childLast = child.last; - var nextObject; - var previousObject; - - // this could be wrong if there is a filter?? - if(this._filters || this._mask) - { - previousObject = this.last._iPrev; - } - else - { - previousObject = this.last; - } + //// COULD BE THIS??? + child.parent.removeChild(child); + // return; + } - nextObject = previousObject._iNext; - - // always true in this case - // need to make sure the parents last is updated too - var updateLast = this; - var prevLast = previousObject; - - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + child.parent = this; - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - -} + this.children.push(child); + + // update the stage refference.. + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // LINKED LIST // + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + // this could be wrong if there is a filter?? + if(this._filters || this._mask) + { + previousObject = this.last._iPrev; + } + else + { + previousObject = this.last; + } + + nextObject = previousObject._iNext; + + // always true in this case + // need to make sure the parents last is updated too + var updateLast = this; + var prevLast = previousObject; + + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } +}; /** * Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown @@ -126,83 +125,84 @@ */ PIXI.DisplayObjectContainer.prototype.addChildAt = function(child, index) { - if(index >= 0 && index <= this.children.length) - { - if(child.parent != undefined) - { - child.parent.removeChild(child); - } - child.parent = this; - - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = this.stage; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - var nextObject; - var previousObject; - - if(index == this.children.length) - { - previousObject = this.last; - var updateLast = this; - var prevLast = this.last; - while(updateLast) - { - if(updateLast.last == prevLast) - { - updateLast.last = child.last; - } - updateLast = updateLast.parent; - } - } - else if(index == 0) - { - previousObject = this; - } - else - { - previousObject = this.children[index-1].last; - } - - nextObject = previousObject._iNext; - - // always true in this case - if(nextObject) - { - nextObject._iPrev = childLast; - childLast._iNext = nextObject; - } - - childFirst._iPrev = previousObject; - previousObject._iNext = childFirst; + if(index >= 0 && index <= this.children.length) + { + if(child.parent !== undefined) + { + child.parent.removeChild(child); + } - this.children.splice(index, 0, child); - // need to remove any render groups.. - if(this.__renderGroup) - { - // being used by a renderTexture.. if it exists then it must be from a render texture; - if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); - // add them to the new render group.. - this.__renderGroup.addDisplayObjectAndChildren(child); - } - - } - else - { - throw new Error(child + " The index "+ index +" supplied is out of bounds " + this.children.length); - } -} + child.parent = this; + + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = this.stage; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // modify the list.. + var childFirst = child.first; + var childLast = child.last; + var nextObject; + var previousObject; + + if(index === this.children.length) + { + previousObject = this.last; + var updateLast = this; + var prevLast = this.last; + while(updateLast) + { + if(updateLast.last === prevLast) + { + updateLast.last = child.last; + } + updateLast = updateLast.parent; + } + } + else if(index === 0) + { + previousObject = this; + } + else + { + previousObject = this.children[index-1].last; + } + + nextObject = previousObject._iNext; + + // always true in this case + if(nextObject) + { + nextObject._iPrev = childLast; + childLast._iNext = nextObject; + } + + childFirst._iPrev = previousObject; + previousObject._iNext = childFirst; + + this.children.splice(index, 0, child); + // need to remove any render groups.. + if(this.__renderGroup) + { + // being used by a renderTexture.. if it exists then it must be from a render texture; + if(child.__renderGroup)child.__renderGroup.removeDisplayObjectAndChildren(child); + // add them to the new render group.. + this.__renderGroup.addDisplayObjectAndChildren(child); + } + + } + else + { + throw new Error(child + ' The index '+ index +' supplied is out of bounds ' + this.children.length); + } +}; /** * [NYI] Swaps the depth of 2 displayObjects @@ -214,31 +214,31 @@ */ PIXI.DisplayObjectContainer.prototype.swapChildren = function(child, child2) { - if(child === child2) { - return; - } + if(child === child2) { + return; + } - var index1 = this.children.indexOf(child); - var index2 = this.children.indexOf(child2); - - if(index1 < 0 || index2 < 0) { - throw new Error("swapChildren: Both the supplied DisplayObjects must be a child of the caller."); - } + var index1 = this.children.indexOf(child); + var index2 = this.children.indexOf(child2); - this.removeChild(child); - this.removeChild(child2); - - if(index1 < index2) - { - this.addChildAt(child2, index1); - this.addChildAt(child, index2); - } - else - { - this.addChildAt(child, index2); - this.addChildAt(child2, index1); - } -} + if(index1 < 0 || index2 < 0) { + throw new Error('swapChildren: Both the supplied DisplayObjects must be a child of the caller.'); + } + + this.removeChild(child); + this.removeChild(child2); + + if(index1 < index2) + { + this.addChildAt(child2, index1); + this.addChildAt(child, index2); + } + else + { + this.addChildAt(child, index2); + this.addChildAt(child2, index1); + } +}; /** * Returns the Child at the specified index @@ -248,15 +248,15 @@ */ PIXI.DisplayObjectContainer.prototype.getChildAt = function(index) { - if(index >= 0 && index < this.children.length) - { - return this.children[index]; - } - else - { - throw new Error(child + " Both the supplied DisplayObjects must be a child of the caller " + this); - } -} + if(index >= 0 && index < this.children.length) + { + return this.children[index]; + } + else + { + throw new Error('Both the supplied DisplayObjects must be a child of the caller ' + this); + } +}; /** * Removes a child from the container. @@ -266,66 +266,65 @@ */ PIXI.DisplayObjectContainer.prototype.removeChild = function(child) { - var index = this.children.indexOf( child ); - if ( index !== -1 ) - { - // unlink // - // modify the list.. - var childFirst = child.first; - var childLast = child.last; - - var nextObject = childLast._iNext; - var previousObject = childFirst._iPrev; - - if(nextObject)nextObject._iPrev = previousObject; - previousObject._iNext = nextObject; - - if(this.last == childLast) - { + var index = this.children.indexOf( child ); + if ( index !== -1 ) + { + // unlink // + // modify the list.. + var childFirst = child.first; + var childLast = child.last; - var tempLast = childFirst._iPrev; - // need to make sure the parents last is updated too - var updateLast = this; - - while(updateLast.last == childLast) - { - updateLast.last = tempLast; - updateLast = updateLast.parent; - if(!updateLast)break; - - } - } - - childLast._iNext = null; - childFirst._iPrev = null; - - // update the stage reference.. - if(this.stage) - { - var tmpChild = child; - do - { - if(tmpChild.interactive)this.stage.dirty = true; - tmpChild.stage = null; - tmpChild = tmpChild._iNext; - } - while(tmpChild) - } - - // webGL trim - if(child.__renderGroup) - { - child.__renderGroup.removeDisplayObjectAndChildren(child); - } - - child.parent = undefined; - this.children.splice( index, 1 ); - } - else - { - throw new Error(child + " The supplied DisplayObject must be a child of the caller " + this); - } -} + var nextObject = childLast._iNext; + var previousObject = childFirst._iPrev; + + if(nextObject)nextObject._iPrev = previousObject; + previousObject._iNext = nextObject; + + if(this.last === childLast) + { + var tempLast = childFirst._iPrev; + // need to make sure the parents last is updated too + var updateLast = this; + + while(updateLast.last === childLast) + { + updateLast.last = tempLast; + updateLast = updateLast.parent; + if(!updateLast)break; + + } + } + + childLast._iNext = null; + childFirst._iPrev = null; + + // update the stage reference.. + if(this.stage) + { + var tmpChild = child; + do + { + if(tmpChild.interactive)this.stage.dirty = true; + tmpChild.stage = null; + tmpChild = tmpChild._iNext; + } + while(tmpChild); + } + + // webGL trim + if(child.__renderGroup) + { + child.__renderGroup.removeDisplayObjectAndChildren(child); + } + + child.parent = undefined; + this.children.splice( index, 1 ); + } + else + { + throw new Error(child + ' The supplied DisplayObject must be a child of the caller ' + this); + } +}; /* * Updates the container's children's transform for rendering @@ -335,12 +334,12 @@ */ PIXI.DisplayObjectContainer.prototype.updateTransform = function() { - if(!this.visible)return; - - PIXI.DisplayObject.prototype.updateTransform.call( this ); - - for(var i=0,j=this.children.length; i 1)ratio = 1; + + if(ratio > 1) ratio = 1; perpLength = Math.sqrt(perp.x * perp.x + perp.y * perp.y); - num = this.texture.height/2//(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; + num = this.texture.height / 2; //(20 + Math.abs(Math.sin((i + this.count) * 0.3) * 50) )* ratio; perp.x /= perpLength; perp.y /= perpLength; perp.x *= num; perp.y *= num; - verticies[index] = point.x + perp.x - verticies[index+1] = point.y + perp.y - verticies[index+2] = point.x - perp.x - verticies[index+3] = point.y - perp.y + verticies[index] = point.x + perp.x; + verticies[index+1] = point.y + perp.y; + verticies[index+2] = point.x - perp.x; + verticies[index+3] = point.y - perp.y; lastPoint = point; } PIXI.DisplayObjectContainer.prototype.updateTransform.call( this ); -} +}; PIXI.Rope.prototype.setTexture = function(texture) { // stop current texture this.texture = texture; this.updateFrame = true; -} - - - - +}; diff --git a/src/pixi/extras/Spine.js b/src/pixi/extras/Spine.js index 61a00c7..50db87d 100644 --- a/src/pixi/extras/Spine.js +++ b/src/pixi/extras/Spine.js @@ -1466,4 +1466,3 @@ slot.sprites[descriptor.name] = sprite; return sprite; }; - diff --git a/src/pixi/extras/Strip.js b/src/pixi/extras/Strip.js index 68c9ea9..e7e18c5 100644 --- a/src/pixi/extras/Strip.js +++ b/src/pixi/extras/Strip.js @@ -45,7 +45,7 @@ this.verticies = new Float32Array() this.colors = new Float32Array() this.indices = new Uint16Array() -*/ + */ this.width = width; this.height = height; @@ -63,7 +63,7 @@ } this.renderable = true; -} +}; // constructor PIXI.Strip.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,11 +79,10 @@ this.width = texture.frame.width; this.height = texture.frame.height; this.updateFrame = true; -} +}; -PIXI.Strip.prototype.onTextureUpdate = function(event) +PIXI.Strip.prototype.onTextureUpdate = function() { this.updateFrame = true; -} +}; // some helper functions.. - diff --git a/src/pixi/extras/TilingSprite.js b/src/pixi/extras/TilingSprite.js index d12fa24..821d7ca 100644 --- a/src/pixi/extras/TilingSprite.js +++ b/src/pixi/extras/TilingSprite.js @@ -58,8 +58,8 @@ this.renderable = true; - this.blendMode = PIXI.blendModes.NORMAL -} + this.blendMode = PIXI.blendModes.NORMAL; +}; // constructor PIXI.TilingSprite.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -79,7 +79,7 @@ // stop current texture this.texture = texture; this.updateFrame = true; -} +}; /** * When the texture is updated, this event will fire to update the frame @@ -88,8 +88,7 @@ * @param event * @private */ -PIXI.TilingSprite.prototype.onTextureUpdate = function(event) +PIXI.TilingSprite.prototype.onTextureUpdate = function() { this.updateFrame = true; -} - +}; diff --git a/src/pixi/filters/AbstractFilter.js b/src/pixi/filters/AbstractFilter.js index 4e40c65..43665de 100644 --- a/src/pixi/filters/AbstractFilter.js +++ b/src/pixi/filters/AbstractFilter.js @@ -2,36 +2,34 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * This is the base class for creating a pixi.js filter. Currently only webGL supports filters. * If you want to make a custom filter this should be your base class. * @class AbstractFilter * @constructor * @param fragmentSrc - * @param uniforms + * @param uniforms */ PIXI.AbstractFilter = function(fragmentSrc, uniforms) { - /** - * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. - * For example the blur filter has two passes blurX and blurY. - * @property passes - * @type Array an array of filter objects - * @private - */ - this.passes = [this]; + /** + * An array of passes - some filters contain a few steps this array simply stores the steps in a liniear fashion. + * For example the blur filter has two passes blurX and blurY. + * @property passes + * @type Array an array of filter objects + * @private + */ + this.passes = [this]; - this.dirty = true; - this.padding = 0; + this.dirty = true; + this.padding = 0; - /** - @property uniforms - @private - */ - this.uniforms = uniforms || {}; - - this.fragmentSrc = fragmentSrc || []; -} + /** + @property uniforms + @private + */ + this.uniforms = uniforms || {}; + this.fragmentSrc = fragmentSrc || []; +}; diff --git a/src/pixi/filters/BlurFilter.js b/src/pixi/filters/BlurFilter.js index 43caa0c..5f89bff 100644 --- a/src/pixi/filters/BlurFilter.js +++ b/src/pixi/filters/BlurFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The BlurFilter applies a Gaussian blur to an object. + * + * The BlurFilter applies a Gaussian blur to an object. * The strength of the blur can be set for x- and y-axis separately (always relative to the stage). * * @class BlurFilter @@ -13,13 +12,11 @@ */ PIXI.BlurFilter = function() { - - this.blurXFilter = new PIXI.BlurXFilter(); - this.blurYFilter = new PIXI.BlurYFilter(); + this.blurXFilter = new PIXI.BlurXFilter(); + this.blurYFilter = new PIXI.BlurYFilter(); - this.passes =[this.blurXFilter, this.blurYFilter]; - -} + this.passes =[this.blurXFilter, this.blurYFilter]; +}; /** * Sets the strength of both the blurX and blurY properties simultaneously @@ -33,7 +30,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = this.blurYFilter.blur = value; + this.blurXFilter.blur = this.blurYFilter.blur = value; } }); @@ -49,7 +46,7 @@ return this.blurXFilter.blur; }, set: function(value) { - this.blurXFilter.blur = value; + this.blurXFilter.blur = value; } }); @@ -65,6 +62,6 @@ return this.blurYFilter.blur; }, set: function(value) { - this.blurYFilter.blur = value; + this.blurYFilter.blur = value; } }); diff --git a/src/pixi/filters/BlurXFilter.js b/src/pixi/filters/BlurXFilter.js index 38a99b4..6e7be33 100644 --- a/src/pixi/filters/BlurXFilter.js +++ b/src/pixi/filters/BlurXFilter.js @@ -2,55 +2,52 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurXFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurXFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurXFilter.prototype.constructor = PIXI.BlurXFilter; - Object.defineProperty(PIXI.BlurXFilter.prototype, 'blur', { get: function() { return this.uniforms.blur.value / (1/7000); }, set: function(value) { - - this.dirty = true; - this.uniforms.blur.value = (1/7000) * value; + + this.dirty = true; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/BlurYFilter.js b/src/pixi/filters/BlurYFilter.js index d472f79..99829fb 100644 --- a/src/pixi/filters/BlurYFilter.js +++ b/src/pixi/filters/BlurYFilter.js @@ -2,43 +2,41 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.BlurYFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec4 sum = vec4(0.0);", + PIXI.AbstractFilter.call( this ); - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;", - "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;", - - "gl_FragColor = sum;", + this.passes = [this]; - "}" - ]; -} + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' vec4 sum = vec4(0.0);', + + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;', + ' sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;', + + ' gl_FragColor = sum;', + '}' + ]; +}; PIXI.BlurYFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.BlurYFilter.prototype.constructor = PIXI.BlurYFilter; @@ -48,7 +46,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/ColorMatrixFilter.js b/src/pixi/filters/ColorMatrixFilter.js index 1386f8b..122b6fb 100644 --- a/src/pixi/filters/ColorMatrixFilter.js +++ b/src/pixi/filters/ColorMatrixFilter.js @@ -3,41 +3,41 @@ */ /** - * - * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA - * color and alpha values of every pixel on your displayObject to produce a result + * + * The ColorMatrixFilter class lets you apply a 4x4 matrix transformation on the RGBA + * color and alpha values of every pixel on your displayObject to produce a result * with a new set of RGBA color and alpha values. Its pretty powerful! * @class ColorMatrixFilter * @contructor */ PIXI.ColorMatrixFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - matrix: {type: 'mat4', value: [1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,1]}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform mat4 matrix;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + matrix: {type: 'mat4', value: [1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,1]}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform mat4 matrix;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * matrix;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.ColorMatrixFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorMatrixFilter.prototype.constructor = PIXI.ColorMatrixFilter; @@ -54,6 +54,6 @@ return this.uniforms.matrix.value; }, set: function(value) { - this.uniforms.matrix.value = value; + this.uniforms.matrix.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/ColorStepFilter.js b/src/pixi/filters/ColorStepFilter.js index 8039af8..c83c887 100644 --- a/src/pixi/filters/ColorStepFilter.js +++ b/src/pixi/filters/ColorStepFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class ColorStepFilter * @contructor */ PIXI.ColorStepFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - step: {type: '1f', value: 5}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float step;", - "void main(void) {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "color = floor(color * step) / step;", - "gl_FragColor = color * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + step: {type: '1f', value: 5}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float step;', + + 'void main(void) {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' color = floor(color * step) / step;', + ' gl_FragColor = color * vColor;', + '}' + ]; +}; PIXI.ColorStepFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.ColorStepFilter.prototype.constructor = PIXI.ColorStepFilter; @@ -46,6 +46,6 @@ return this.uniforms.step.value; }, set: function(value) { - this.uniforms.step.value = value; + this.uniforms.step.value = value; } }); diff --git a/src/pixi/filters/CrossHatchFilter.js b/src/pixi/filters/CrossHatchFilter.js index 2d26715..43f3c26 100644 --- a/src/pixi/filters/CrossHatchFilter.js +++ b/src/pixi/filters/CrossHatchFilter.js @@ -2,58 +2,55 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.CrossHatchFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float blur;", - "uniform sampler2D uSampler;", - "void main(void) {", - - - " float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);", - " ", - " gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);", - " ", - " if (lum < 1.00) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.75) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.50) {", - " if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - " ", - " if (lum < 0.3) {", - " if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {", - " gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);", - " }", - " }", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1 / 512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float blur;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);', + + ' gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);', + + ' if (lum < 1.00) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.75) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.50) {', + ' if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + + ' if (lum < 0.3) {', + ' if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0) {', + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);', + ' }', + ' }', + '}' + ]; +}; PIXI.CrossHatchFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.CrossHatchFilter.prototype.constructor = PIXI.BlurYFilter; @@ -63,7 +60,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/DisplacementFilter.js b/src/pixi/filters/DisplacementFilter.js index 5662731..40af870 100644 --- a/src/pixi/filters/DisplacementFilter.js +++ b/src/pixi/filters/DisplacementFilter.js @@ -2,10 +2,9 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * - * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. + * + * The DisplacementFilter class uses the pixel values from the specified texture (called the displacement map) to perform a displacement of an object. * You can use this filter to apply all manor of crazy warping effects * Currently the r property of the texture is used offset the x and the g propery of the texture is used to offset the y. * @class DisplacementFilter @@ -14,80 +13,75 @@ */ PIXI.DisplacementFilter = function(texture) { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - texture.baseTexture._powerOf2 = true; + PIXI.AbstractFilter.call( this ); - // set the uniforms - //console.log() - this.uniforms = { - displacementMap: {type: 'sampler2D', value:texture}, - scale: {type: '2f', value:{x:30, y:30}}, - offset: {type: '2f', value:{x:0, y:0}}, - mapDimensions: {type: '2f', value:{x:1, y:5112}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - + this.passes = [this]; + texture.baseTexture._powerOf2 = true; - if(texture.baseTexture.hasLoaded) - { - this.uniforms.mapDimensions.value.x = texture.width; - this.uniforms.mapDimensions.value.y = texture.height; - } - else - { - this.boundLoadedFunction = this.onTextureLoaded.bind(this); + // set the uniforms + //console.log() + this.uniforms = { + displacementMap: {type: 'sampler2D', value:texture}, + scale: {type: '2f', value:{x:30, y:30}}, + offset: {type: '2f', value:{x:0, y:0}}, + mapDimensions: {type: '2f', value:{x:1, y:5112}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - texture.baseTexture.on("loaded", this.boundLoadedFunction); - } + if(texture.baseTexture.hasLoaded) + { + this.uniforms.mapDimensions.value.x = texture.width; + this.uniforms.mapDimensions.value.y = texture.height; + } + else + { + this.boundLoadedFunction = this.onTextureLoaded.bind(this); - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D displacementMap;", - "uniform sampler2D uSampler;", - "uniform vec2 scale;", - "uniform vec2 offset;", - "uniform vec4 dimensions;", - "uniform vec2 mapDimensions;",// = vec2(256.0, 256.0);", - // "const vec2 textureDimensions = vec2(750.0, 750.0);", - - "void main(void) {", - "vec2 mapCords = vTextureCoord.xy;", -// "mapCords -= ;", - "mapCords += (dimensions.zw + offset)/ dimensions.xy ;", - "mapCords.y *= -1.0;", - "mapCords.y += 1.0;", - "vec2 matSample = texture2D(displacementMap, mapCords).xy;", - "matSample -= 0.5;", - "matSample *= scale;", - "matSample /= mapDimensions;", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);", - "vec2 cord = vTextureCoord;", - - //"gl_FragColor = texture2D(displacementMap, cord);", - "gl_FragColor = gl_FragColor * vColor;", - - "}" - ]; - -} + texture.baseTexture.on('loaded', this.boundLoadedFunction); + } + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D displacementMap;', + 'uniform sampler2D uSampler;', + 'uniform vec2 scale;', + 'uniform vec2 offset;', + 'uniform vec4 dimensions;', + 'uniform vec2 mapDimensions;',// = vec2(256.0, 256.0);', + // 'const vec2 textureDimensions = vec2(750.0, 750.0);', + + 'void main(void) {', + ' vec2 mapCords = vTextureCoord.xy;', + //' mapCords -= ;', + ' mapCords += (dimensions.zw + offset)/ dimensions.xy ;', + ' mapCords.y *= -1.0;', + ' mapCords.y += 1.0;', + ' vec2 matSample = texture2D(displacementMap, mapCords).xy;', + ' matSample -= 0.5;', + ' matSample *= scale;', + ' matSample /= mapDimensions;', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x + matSample.x, vTextureCoord.y + matSample.y));', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb, 1.0);', + ' vec2 cord = vTextureCoord;', + + //' gl_FragColor = texture2D(displacementMap, cord);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.DisplacementFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.DisplacementFilter.prototype.constructor = PIXI.DisplacementFilter; PIXI.DisplacementFilter.prototype.onTextureLoaded = function() { - - this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; - this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; + this.uniforms.mapDimensions.value.x = this.uniforms.displacementMap.value.width; + this.uniforms.mapDimensions.value.y = this.uniforms.displacementMap.value.height; - this.uniforms.displacementMap.value.baseTexture.off("loaded", this.boundLoadedFunction) - -} + this.uniforms.displacementMap.value.baseTexture.off('loaded', this.boundLoadedFunction); +}; /** * The texture used for the displacemtent map * must be power of 2 texture at the moment @@ -100,7 +94,7 @@ return this.uniforms.displacementMap.value; }, set: function(value) { - this.uniforms.displacementMap.value = value; + this.uniforms.displacementMap.value = value; } }); @@ -115,7 +109,7 @@ return this.uniforms.scale.value; }, set: function(value) { - this.uniforms.scale.value = value; + this.uniforms.scale.value = value; } }); @@ -130,6 +124,6 @@ return this.uniforms.offset.value; }, set: function(value) { - this.uniforms.offset.value = value; + this.uniforms.offset.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/DotScreenFilter.js b/src/pixi/filters/DotScreenFilter.js index 6c59d4c..de00f77 100644 --- a/src/pixi/filters/DotScreenFilter.js +++ b/src/pixi/filters/DotScreenFilter.js @@ -5,50 +5,50 @@ /** * - * This filter applies a pixlate effect making display objects appear "blocky" + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.DotScreenFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - scale: {type: '1f', value:1}, - angle: {type: '1f', value:5}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; + this.passes = [this]; + + // set the uniforms + this.uniforms = { + scale: {type: '1f', value:1}, + angle: {type: '1f', value:5}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "uniform float angle;", - "uniform float scale;", + 'uniform float angle;', + 'uniform float scale;', - "float pattern() {", - "float s = sin(angle), c = cos(angle);", - "vec2 tex = vTextureCoord * dimensions.xy;", - "vec2 point = vec2(", - "c * tex.x - s * tex.y,", - "s * tex.x + c * tex.y", - ") * scale;", - "return (sin(point.x) * sin(point.y)) * 4.0;", - "}", + 'float pattern() {', + ' float s = sin(angle), c = cos(angle);', + ' vec2 tex = vTextureCoord * dimensions.xy;', + ' vec2 point = vec2(', + ' c * tex.x - s * tex.y,', + ' s * tex.x + c * tex.y', + ' ) * scale;', + ' return (sin(point.x) * sin(point.y)) * 4.0;', + '}', - "void main() {", - "vec4 color = texture2D(uSampler, vTextureCoord);", - "float average = (color.r + color.g + color.b) / 3.0;", - "gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);", - "}", - ]; -} + 'void main() {', + ' vec4 color = texture2D(uSampler, vTextureCoord);', + ' float average = (color.r + color.g + color.b) / 3.0;', + ' gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a);', + '}' + ]; +}; PIXI.DotScreenFilter.prototype = Object.create( PIXI.DotScreenFilter.prototype ); PIXI.DotScreenFilter.prototype.constructor = PIXI.DotScreenFilter; @@ -64,8 +64,8 @@ return this.uniforms.scale.value; }, set: function(value) { - this.dirty = true; - this.uniforms.scale.value = value; + this.dirty = true; + this.uniforms.scale.value = value; } }); @@ -80,7 +80,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/filters/FilterBlock.js b/src/pixi/filters/FilterBlock.js index 53e02b9..3b6ab52 100644 --- a/src/pixi/filters/FilterBlock.js +++ b/src/pixi/filters/FilterBlock.js @@ -8,6 +8,4 @@ { this.visible = true; this.renderable = true; -} - ->>>>>>> 67d0c577d3163e527043f6973a4b3a31131cab08 +}; diff --git a/src/pixi/filters/GrayFilter.js b/src/pixi/filters/GrayFilter.js index 9b6bb61..5065834 100644 --- a/src/pixi/filters/GrayFilter.js +++ b/src/pixi/filters/GrayFilter.js @@ -2,37 +2,37 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This turns your displayObjects to black and white. * @class GrayFilter * @contructor */ PIXI.GrayFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - gray: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "uniform float gray;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + gray: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'uniform float gray;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix(gl_FragColor.rgb, vec3(0.2126*gl_FragColor.r + 0.7152*gl_FragColor.g + 0.0722*gl_FragColor.b), gray);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.GrayFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.GrayFilter.prototype.constructor = PIXI.GrayFilter; @@ -46,6 +46,6 @@ return this.uniforms.gray.value; }, set: function(value) { - this.uniforms.gray.value = value; + this.uniforms.gray.value = value; } }); diff --git a/src/pixi/filters/InvertFilter.js b/src/pixi/filters/InvertFilter.js index afd196e..ac4393f 100644 --- a/src/pixi/filters/InvertFilter.js +++ b/src/pixi/filters/InvertFilter.js @@ -3,37 +3,37 @@ */ /** - * + * * This inverts your displayObjects colors. * @class InvertFilter * @contructor */ PIXI.InvertFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float invert;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);", - //"gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float invert;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( (vec3(1)-gl_FragColor.rgb) * gl_FragColor.a, gl_FragColor.rgb, 1.0 - invert);', + //' gl_FragColor.rgb = gl_FragColor.rgb * gl_FragColor.a;', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.InvertFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.InvertFilter.prototype.constructor = PIXI.InvertFilter; @@ -47,6 +47,6 @@ return this.uniforms.invert.value; }, set: function(value) { - this.uniforms.invert.value = value; + this.uniforms.invert.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/PixelateFilter.js b/src/pixi/filters/PixelateFilter.js index d268015..e4320eb 100644 --- a/src/pixi/filters/PixelateFilter.js +++ b/src/pixi/filters/PixelateFilter.js @@ -3,50 +3,49 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.PixelateFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - invert: {type: '1f', value: 0}, - dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, - pixelSize: {type: '2f', value:{x:10, y:10}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 testDim;", - "uniform vec4 dimensions;", - "uniform vec2 pixelSize;", - "uniform sampler2D uSampler;", - "void main(void) {", - "vec2 coord = vTextureCoord;", + // set the uniforms + this.uniforms = { + invert: {type: '1f', value: 0}, + dimensions: {type: '4fv', value:new Float32Array([10000, 100, 10, 10])}, + pixelSize: {type: '2f', value:{x:10, y:10}}, + }; - "vec2 size = dimensions.xy/pixelSize;", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 testDim;', + 'uniform vec4 dimensions;', + 'uniform vec2 pixelSize;', + 'uniform sampler2D uSampler;', - "vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;", - "gl_FragColor = texture2D(uSampler, color);", - "}" - ]; - + 'void main(void) {', + ' vec2 coord = vTextureCoord;', -} + ' vec2 size = dimensions.xy/pixelSize;', + + ' vec2 color = floor( ( vTextureCoord * size ) ) / size + pixelSize/dimensions.xy * 0.5;', + ' gl_FragColor = texture2D(uSampler, color);', + '}' + ]; +}; PIXI.PixelateFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.PixelateFilter.prototype.constructor = PIXI.PixelateFilter; /** - * + * * This a point that describes the size of the blocs. x is the width of the block and y is the the height * @property size * @type Point @@ -56,7 +55,7 @@ return this.uniforms.pixelSize.value; }, set: function(value) { - this.dirty = true; - this.uniforms.pixelSize.value = value; + this.dirty = true; + this.uniforms.pixelSize.value = value; } -}); \ No newline at end of file +}); diff --git a/src/pixi/filters/RGBSplitFilter.js b/src/pixi/filters/RGBSplitFilter.js index 35a837e..81439dd 100644 --- a/src/pixi/filters/RGBSplitFilter.js +++ b/src/pixi/filters/RGBSplitFilter.js @@ -2,39 +2,38 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.RGBSplitFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - red: {type: '2f', value: {x:20, y:20}}, - green: {type: '2f', value: {x:-20, y:20}}, - blue: {type: '2f', value: {x:20, y:-20}}, - dimensions: {type: '4fv', value:[0,0,0,0]} - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec2 red;", - "uniform vec2 green;", - "uniform vec2 blue;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;", - "gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;", - "gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;", - "gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + red: {type: '2f', value: {x:20, y:20}}, + green: {type: '2f', value: {x:-20, y:20}}, + blue: {type: '2f', value: {x:20, y:-20}}, + dimensions: {type: '4fv', value:[0,0,0,0]} + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec2 red;', + 'uniform vec2 green;', + 'uniform vec2 blue;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor.r = texture2D(uSampler, vTextureCoord + red/dimensions.xy).r;', + ' gl_FragColor.g = texture2D(uSampler, vTextureCoord + green/dimensions.xy).g;', + ' gl_FragColor.b = texture2D(uSampler, vTextureCoord + blue/dimensions.xy).b;', + ' gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;', + '}' + ]; +}; PIXI.RGBSplitFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.RGBSplitFilter.prototype.constructor = PIXI.RGBSplitFilter; @@ -44,7 +43,7 @@ return this.uniforms.blur.value / (1/7000); }, set: function(value) { - //this.padding = value; - this.uniforms.blur.value = (1/7000) * value; + //this.padding = value; + this.uniforms.blur.value = (1/7000) * value; } }); diff --git a/src/pixi/filters/SepiaFilter.js b/src/pixi/filters/SepiaFilter.js index 22f31a4..f114d76 100644 --- a/src/pixi/filters/SepiaFilter.js +++ b/src/pixi/filters/SepiaFilter.js @@ -1,42 +1,40 @@ /** -/** * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** - * + * * This applies a sepia effect to your displayObjects. * @class SepiaFilter * @contructor */ PIXI.SepiaFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - sepia: {type: '1f', value: 1}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float sepia;", - "uniform sampler2D uSampler;", - - "const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord);", - "gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);", - "gl_FragColor = gl_FragColor * vColor;", - "}" - ]; - -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + sepia: {type: '1f', value: 1}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float sepia;', + 'uniform sampler2D uSampler;', + + 'const mat3 sepiaMatrix = mat3(0.3588, 0.7044, 0.1368, 0.2990, 0.5870, 0.1140, 0.2392, 0.4696, 0.0912);', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord);', + ' gl_FragColor.rgb = mix( gl_FragColor.rgb, gl_FragColor.rgb * sepiaMatrix, sepia);', + ' gl_FragColor = gl_FragColor * vColor;', + '}' + ]; +}; PIXI.SepiaFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SepiaFilter.prototype.constructor = PIXI.SepiaFilter; @@ -50,6 +48,6 @@ return this.uniforms.sepia.value; }, set: function(value) { - this.uniforms.sepia.value = value; + this.uniforms.sepia.value = value; } }); diff --git a/src/pixi/filters/SmartBlurFilter.js b/src/pixi/filters/SmartBlurFilter.js index 93567e8..1140a56 100644 --- a/src/pixi/filters/SmartBlurFilter.js +++ b/src/pixi/filters/SmartBlurFilter.js @@ -2,54 +2,51 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - - PIXI.SmartBlurFilter = function() { - PIXI.AbstractFilter.call( this ); - - this.passes = [this]; - - // set the uniforms - this.uniforms = { - blur: {type: '1f', value: 1/512}, - }; - - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "uniform sampler2D uSampler;", - // "uniform vec2 delta;", - "const vec2 delta = vec2(1.0/10.0, 0.0);", - // "uniform float darkness;", - - "float random(vec3 scale, float seed) {", - "return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);", - "}", - - - "void main(void) {", - - "vec4 color = vec4(0.0);", - "float total = 0.0;", - - "float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);", - - "for (float t = -30.0; t <= 30.0; t++) {", - "float percent = (t + offset - 0.5) / 30.0;", - "float weight = 1.0 - abs(percent);", - "vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);", - "sample.rgb *= sample.a;", - "color += sample * weight;", - "total += weight;", - "}", - - "gl_FragColor = color / total;", - "gl_FragColor.rgb /= gl_FragColor.a + 0.00001;", - // "gl_FragColor.rgb *= darkness;", - "}" - ]; -} + PIXI.AbstractFilter.call( this ); + + this.passes = [this]; + + // set the uniforms + this.uniforms = { + blur: {type: '1f', value: 1/512}, + }; + + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'uniform sampler2D uSampler;', + //'uniform vec2 delta;', + 'const vec2 delta = vec2(1.0/10.0, 0.0);', + //'uniform float darkness;', + + 'float random(vec3 scale, float seed) {', + ' return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);', + '}', + + + 'void main(void) {', + ' vec4 color = vec4(0.0);', + ' float total = 0.0;', + + ' float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);', + + ' for (float t = -30.0; t <= 30.0; t++) {', + ' float percent = (t + offset - 0.5) / 30.0;', + ' float weight = 1.0 - abs(percent);', + ' vec4 sample = texture2D(uSampler, vTextureCoord + delta * percent);', + ' sample.rgb *= sample.a;', + ' color += sample * weight;', + ' total += weight;', + ' }', + + ' gl_FragColor = color / total;', + ' gl_FragColor.rgb /= gl_FragColor.a + 0.00001;', + //' gl_FragColor.rgb *= darkness;', + '}' + ]; +}; PIXI.SmartBlurFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.SmartBlurFilter.prototype.constructor = PIXI.SmartBlurFilter; @@ -59,6 +56,6 @@ return this.uniforms.blur.value; }, set: function(value) { - this.uniforms.blur.value = value; + this.uniforms.blur.value = value; } }); diff --git a/src/pixi/filters/TwistFilter.js b/src/pixi/filters/TwistFilter.js index 0dce008..c529dd7 100644 --- a/src/pixi/filters/TwistFilter.js +++ b/src/pixi/filters/TwistFilter.js @@ -3,59 +3,57 @@ */ /** - * - * This filter applies a pixlate effect making display objects appear "blocky" + * + * This filter applies a pixlate effect making display objects appear 'blocky' * @class PixelateFilter * @contructor */ PIXI.TwistFilter = function() { - PIXI.AbstractFilter.call( this ); + PIXI.AbstractFilter.call( this ); - this.passes = [this]; - - // set the uniforms - this.uniforms = { - radius: {type: '1f', value:0.5}, - angle: {type: '1f', value:5}, - offset: {type: '2f', value:{x:0.5, y:0.5}}, - }; + this.passes = [this]; - this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform vec4 dimensions;", - "uniform sampler2D uSampler;", - - "uniform float radius;", - "uniform float angle;", - "uniform vec2 offset;", + // set the uniforms + this.uniforms = { + radius: {type: '1f', value:0.5}, + angle: {type: '1f', value:5}, + offset: {type: '2f', value:{x:0.5, y:0.5}}, + }; - "void main(void) {", - "vec2 coord = vTextureCoord - offset;", - "float distance = length(coord);", - - "if (distance < radius){", + this.fragmentSrc = [ + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform vec4 dimensions;', + 'uniform sampler2D uSampler;', - "float ratio = (radius - distance) / radius;", - "float angleMod = ratio * ratio * angle;", - "float s = sin(angleMod);", - "float c = cos(angleMod);", - "coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);", + 'uniform float radius;', + 'uniform float angle;', + 'uniform vec2 offset;', - "}", + 'void main(void) {', + ' vec2 coord = vTextureCoord - offset;', + ' float distance = length(coord);', - "gl_FragColor = texture2D(uSampler, coord+offset);", - "}" - ]; -} + ' if (distance < radius) {', + ' float ratio = (radius - distance) / radius;', + ' float angleMod = ratio * ratio * angle;', + ' float s = sin(angleMod);', + ' float c = cos(angleMod);', + ' coord = vec2(coord.x * c - coord.y * s, coord.x * s + coord.y * c);', + ' }', + + ' gl_FragColor = texture2D(uSampler, coord+offset);', + '}' + ]; +}; PIXI.TwistFilter.prototype = Object.create( PIXI.AbstractFilter.prototype ); PIXI.TwistFilter.prototype.constructor = PIXI.TwistFilter; /** - * + * * This point describes the the offset of the twist * @property size * @type Point @@ -65,13 +63,13 @@ return this.uniforms.offset.value; }, set: function(value) { - this.dirty = true; - this.uniforms.offset.value = value; + this.dirty = true; + this.uniforms.offset.value = value; } }); /** - * + * * This radius describes size of the twist * @property size * @type Number @@ -81,13 +79,13 @@ return this.uniforms.radius.value; }, set: function(value) { - this.dirty = true; - this.uniforms.radius.value = value; + this.dirty = true; + this.uniforms.radius.value = value; } }); /** - * + * * This radius describes angle of the twist * @property angle * @type Number @@ -97,7 +95,7 @@ return this.uniforms.angle.value; }, set: function(value) { - this.dirty = true; - this.uniforms.angle.value = value; + this.dirty = true; + this.uniforms.angle.value = value; } }); \ No newline at end of file diff --git a/src/pixi/loaders/AssetLoader.js b/src/pixi/loaders/AssetLoader.js index 6d65073..419aa5a 100644 --- a/src/pixi/loaders/AssetLoader.js +++ b/src/pixi/loaders/AssetLoader.js @@ -6,16 +6,16 @@ * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the * assets have been loaded they are added to the PIXI Texture cache and can be accessed * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() - * When all items have been loaded this class will dispatch a "onLoaded" event - * As each individual item is loaded this class will dispatch a "onProgress" event + * When all items have been loaded this class will dispatch a 'onLoaded' event + * As each individual item is loaded this class will dispatch a 'onProgress' event * * @class AssetLoader * @constructor * @uses EventTarget * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded - * supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported - * sprite sheet data formats only include "JSON" at this time. Supported bitmap font - * data formats include "xml" and "fnt". + * supported. Supported image formats include 'jpeg', 'jpg', 'png', 'gif'. Supported + * sprite sheet data formats only include 'JSON' at this time. Supported bitmap font + * data formats include 'xml' and 'fnt'. * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ PIXI.AssetLoader = function(assetURLs, crossorigin) @@ -45,17 +45,15 @@ * @type Object */ this.loadersByType = { - "jpg": PIXI.ImageLoader, - "jpeg": PIXI.ImageLoader, - "png": PIXI.ImageLoader, - "gif": PIXI.ImageLoader, - "json": PIXI.JsonLoader, - "anim": PIXI.SpineLoader, - "xml": PIXI.BitmapFontLoader, - "fnt": PIXI.BitmapFontLoader + 'jpg': PIXI.ImageLoader, + 'jpeg': PIXI.ImageLoader, + 'png': PIXI.ImageLoader, + 'gif': PIXI.ImageLoader, + 'json': PIXI.JsonLoader, + 'anim': PIXI.SpineLoader, + 'xml': PIXI.BitmapFontLoader, + 'fnt': PIXI.BitmapFontLoader }; - - }; /** @@ -72,31 +70,32 @@ PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader; -PIXI.AssetLoader.prototype._getDataType = function(str) +PIXI.AssetLoader.prototype._getDataType = function(str) { - var test = "data:"; + var test = 'data:'; //starts with 'data:' var start = str.slice(0, test.length).toLowerCase(); - if (start == test) { + if (start === test) { var data = str.slice(test.length); - + var sepIdx = data.indexOf(','); if (sepIdx === -1) //malformed data URI scheme return null; - //e.g. "image/gif;base64" => "image/gif" + //e.g. 'image/gif;base64' => 'image/gif' var info = data.slice(0, sepIdx).split(';')[0]; //We might need to handle some special cases here... - //standardize text/plain to "txt" file extension - if (!info || info.toLowerCase() == "text/plain") - return "txt" + //standardize text/plain to 'txt' file extension + if (!info || info.toLowerCase() === 'text/plain') + return 'txt'; //User specified mime type, try splitting it by '/' return info.split('/').pop().toLowerCase(); } + return null; -} +}; /** * Starts loading the assets sequentially @@ -121,15 +120,15 @@ //if not, assume it's a file URI if (!fileType) - fileType = fileName.split("?").shift().split(".").pop().toLowerCase(); + fileType = fileName.split('?').shift().split('.').pop().toLowerCase(); var Constructor = this.loadersByType[fileType]; if(!Constructor) - throw new Error(fileType + " is an unsupported file type"); + throw new Error(fileType + ' is an unsupported file type'); var loader = new Constructor(fileName, this.crossorigin); - loader.addEventListener("loaded", onLoad); + loader.addEventListener('loaded', onLoad); loader.load(); } }; @@ -143,13 +142,12 @@ PIXI.AssetLoader.prototype.onAssetLoaded = function() { this.loadCount--; - this.dispatchEvent({type: "onProgress", content: this}); + this.dispatchEvent({type: 'onProgress', content: this}); if (this.onProgress) this.onProgress(); if (!this.loadCount) { - this.dispatchEvent({type: "onComplete", content: this}); + this.dispatchEvent({type: 'onComplete', content: this}); if(this.onComplete) this.onComplete(); } }; - diff --git a/src/pixi/loaders/BitmapFontLoader.js b/src/pixi/loaders/BitmapFontLoader.js index ef05094..19d4486 100644 --- a/src/pixi/loaders/BitmapFontLoader.js +++ b/src/pixi/loaders/BitmapFontLoader.js @@ -3,10 +3,10 @@ */ /** - * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * The xml loader is used to load in XML bitmap font data ('xml' or 'fnt') * To generate the data you can use http://www.angelcode.com/products/bmfont/ * This loader will also load the image file as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class BitmapFontLoader * @uses EventTarget @@ -19,7 +19,7 @@ /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -46,7 +46,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] The texture of the bitmap font @@ -74,9 +74,9 @@ scope.onXMLLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); - this.ajaxRequest.send(null) + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/xml'); + this.ajaxRequest.send(null); }; /** @@ -87,40 +87,40 @@ */ PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() { - if (this.ajaxRequest.readyState == 4) + if (this.ajaxRequest.readyState === 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { - var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName('page')[0].attributes.getNamedItem('file').nodeValue; var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); this.texture = image.texture.baseTexture; var data = {}; - var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; - var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; - data.font = info.attributes.getNamedItem("face").nodeValue; - data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); - data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + var info = this.ajaxRequest.responseXML.getElementsByTagName('info')[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName('common')[0]; + data.font = info.attributes.getNamedItem('face').nodeValue; + data.size = parseInt(info.attributes.getNamedItem('size').nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem('lineHeight').nodeValue, 10); data.chars = {}; //parse letters - var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + var letters = this.ajaxRequest.responseXML.getElementsByTagName('char'); for (var i = 0; i < letters.length; i++) { - var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + var charCode = parseInt(letters[i].attributes.getNamedItem('id').nodeValue, 10); var textureRect = new PIXI.Rectangle( - parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), - parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + parseInt(letters[i].attributes.getNamedItem('x').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('y').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('width').nodeValue, 10), + parseInt(letters[i].attributes.getNamedItem('height').nodeValue, 10) ); data.chars[charCode] = { - xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), - yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), - xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + xOffset: parseInt(letters[i].attributes.getNamedItem('xoffset').nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem('yoffset').nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem('xadvance').nodeValue, 10), kerning: {}, texture: PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect) @@ -128,12 +128,12 @@ } //parse kernings - var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + var kernings = this.ajaxRequest.responseXML.getElementsByTagName('kerning'); for (i = 0; i < kernings.length; i++) { - var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); - var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); - var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + var first = parseInt(kernings[i].attributes.getNamedItem('first').nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem('second').nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem('amount').nodeValue, 10); data.chars[second].kerning[first] = amount; @@ -142,7 +142,7 @@ PIXI.BitmapText.fonts[data.font] = data; var scope = this; - image.addEventListener("loaded", function() { + image.addEventListener('loaded', function() { scope.onLoaded(); }); image.load(); @@ -158,5 +158,5 @@ */ PIXI.BitmapFontLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; diff --git a/src/pixi/loaders/ImageLoader.js b/src/pixi/loaders/ImageLoader.js index d8a4137..c73893f 100644 --- a/src/pixi/loaders/ImageLoader.js +++ b/src/pixi/loaders/ImageLoader.js @@ -3,7 +3,7 @@ */ /** - * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * When loaded this class will dispatch a 'loaded' event * @@ -46,7 +46,7 @@ if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); @@ -65,7 +65,7 @@ */ PIXI.ImageLoader.prototype.onLoaded = function() { - this.dispatchEvent({type: "loaded", content: this}); + this.dispatchEvent({type: 'loaded', content: this}); }; /** @@ -75,7 +75,7 @@ * @method loadFramedSpriteSheet * @param frameWidth {Number} with of each frame * @param frameHeight {Number} height of each frame - * @param textureName {String} if given, the frames will be cached in - format + * @param textureName {String} if given, the frames will be cached in - format */ PIXI.ImageLoader.prototype.loadFramedSpriteSheet = function(frameWidth, frameHeight, textureName) { @@ -96,14 +96,14 @@ }); this.frames.push(texture); - if (textureName) PIXI.TextureCache[textureName+'-'+i] = texture; + if (textureName) PIXI.TextureCache[textureName + '-' + i] = texture; } } if(!this.texture.baseTexture.hasLoaded) { var scope = this; - this.texture.baseTexture.addEventListener("loaded", function() { + this.texture.baseTexture.addEventListener('loaded', function() { scope.onLoaded(); }); } @@ -111,4 +111,4 @@ { this.onLoaded(); } -}; \ No newline at end of file +}; diff --git a/src/pixi/loaders/JsonLoader.js b/src/pixi/loaders/JsonLoader.js index e20794f..08c1d5e 100644 --- a/src/pixi/loaders/JsonLoader.js +++ b/src/pixi/loaders/JsonLoader.js @@ -4,8 +4,8 @@ /** * The json file loader is used to load in JSON data and parsing it - * When loaded this class will dispatch a "loaded" event - * If load failed this class will dispatch a "error" event + * When loaded this class will dispatch a 'loaded' event + * If load failed this class will dispatch a 'error' event * * @class JsonLoader * @uses EventTarget @@ -39,7 +39,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * [read-only] Whether the data has loaded yet @@ -61,14 +61,14 @@ * @method load */ PIXI.JsonLoader.prototype.load = function () { - this.ajaxRequest = new AjaxRequest(); + this.ajaxRequest = new PIXI.AjaxRequest(); var scope = this; this.ajaxRequest.onreadystatechange = function () { scope.onJSONLoaded(); }; - this.ajaxRequest.open("GET", this.url, true); - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.open('GET', this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType('application/json'); this.ajaxRequest.send(null); }; @@ -79,8 +79,8 @@ * @private */ PIXI.JsonLoader.prototype.onJSONLoaded = function () { - if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { + if (this.ajaxRequest.readyState === 4) { + if (this.ajaxRequest.status === 200 || window.location.href.indexOf('http') === -1) { this.json = JSON.parse(this.ajaxRequest.responseText); if(this.json.frames) @@ -92,7 +92,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -146,7 +146,7 @@ PIXI.JsonLoader.prototype.onLoaded = function () { this.loaded = true; this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; @@ -159,7 +159,7 @@ */ PIXI.JsonLoader.prototype.onError = function () { this.dispatchEvent({ - type: "error", + type: 'error', content: this }); }; \ No newline at end of file diff --git a/src/pixi/loaders/SpineLoader.js b/src/pixi/loaders/SpineLoader.js index f0e4ce1..f0a38ca 100644 --- a/src/pixi/loaders/SpineLoader.js +++ b/src/pixi/loaders/SpineLoader.js @@ -49,7 +49,7 @@ * @readOnly */ this.loaded = false; -} +}; PIXI.SpineLoader.prototype.constructor = PIXI.SpineLoader; @@ -75,7 +75,7 @@ * @method onJSONLoaded * @private */ -PIXI.SpineLoader.prototype.onJSONLoaded = function (event) { +PIXI.SpineLoader.prototype.onJSONLoaded = function () { var spineJsonParser = new spine.SkeletonJson(); var skeletonData = spineJsonParser.readSkeletonData(this.json); diff --git a/src/pixi/loaders/SpriteSheetLoader.js b/src/pixi/loaders/SpriteSheetLoader.js index d0fe441..e9844ce 100644 --- a/src/pixi/loaders/SpriteSheetLoader.js +++ b/src/pixi/loaders/SpriteSheetLoader.js @@ -4,12 +4,12 @@ /** * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the 'JSON' format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a "loaded" event + * When loaded this class will dispatch a 'loaded' event * * @class SpriteSheetLoader * @uses EventTarget @@ -17,12 +17,11 @@ * @param url {String} The url of the sprite sheet JSON file * @param crossorigin {Boolean} Whether requests should be treated as crossorigin */ - PIXI.SpriteSheetLoader = function (url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" + * make sure to set the format as 'JSON' */ PIXI.EventTarget.call(this); @@ -49,7 +48,7 @@ * @type String * @readOnly */ - this.baseUrl = url.replace(/[^\/]*$/, ""); + this.baseUrl = url.replace(/[^\/]*$/, ''); /** * The texture being loaded @@ -79,7 +78,7 @@ PIXI.SpriteSheetLoader.prototype.load = function () { var scope = this; var jsonLoader = new PIXI.JsonLoader(this.url, this.crossorigin); - jsonLoader.addEventListener("loaded", function (event) { + jsonLoader.addEventListener('loaded', function (event) { scope.json = event.content.json; scope.onJSONLoaded(); }); @@ -99,7 +98,7 @@ var frameData = this.json.frames; this.texture = image.texture.baseTexture; - image.addEventListener("loaded", function (event) { + image.addEventListener('loaded', function () { scope.onLoaded(); }); @@ -123,6 +122,7 @@ image.load(); }; + /** * Invoke when all files are loaded (json and texture) * @@ -131,7 +131,7 @@ */ PIXI.SpriteSheetLoader.prototype.onLoaded = function () { this.dispatchEvent({ - type: "loaded", + type: 'loaded', content: this }); }; diff --git a/src/pixi/primitives/Graphics.js b/src/pixi/primitives/Graphics.js index dbe2804..f105bef 100644 --- a/src/pixi/primitives/Graphics.js +++ b/src/pixi/primitives/Graphics.js @@ -59,7 +59,7 @@ * @private */ this.currentPath = {points:[]}; -} +}; // constructor PIXI.Graphics.prototype = Object.create( PIXI.DisplayObjectContainer.prototype ); @@ -85,7 +85,7 @@ fillColor:this.fillColor, fillAlpha:this.fillAlpha, fill:this.filling, points:[], type:PIXI.Graphics.POLY}; this.graphicsData.push(this.currentPath); -} +}; /** * Moves the current drawing position to (x, y). @@ -104,7 +104,7 @@ this.currentPath.points.push(x, y); this.graphicsData.push(this.currentPath); -} +}; /** * Draws a line using the current line style from the current drawing position to (x, y); @@ -118,7 +118,7 @@ { this.currentPath.points.push(x, y); this.dirty = true; -} +}; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods @@ -133,7 +133,7 @@ this.filling = true; this.fillColor = color || 0; this.fillAlpha = (arguments.length < 2) ? 1 : alpha; -} +}; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. @@ -145,7 +145,7 @@ this.filling = false; this.fillColor = null; this.fillAlpha = 1; -} +}; /** * @method drawRect @@ -165,7 +165,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws a circle. @@ -185,7 +185,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Draws an elipse. @@ -206,7 +206,7 @@ this.graphicsData.push(this.currentPath); this.dirty = true; -} +}; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. @@ -222,8 +222,8 @@ this.clearDirty = true; this.graphicsData = []; - this.bounds = null//new PIXI.Rectangle(); -} + this.bounds = null; //new PIXI.Rectangle(); +}; PIXI.Graphics.prototype.updateFilterBounds = function() @@ -239,8 +239,6 @@ var points, x, y; for (var i = 0; i < this.graphicsData.length; i++) { - - var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; @@ -265,7 +263,7 @@ x = points.x; y = points.y; var radius = points.radius + lineWidth/2; - + minX = x - radius < minX ? x - radius : minX; maxX = x + radius > maxX ? x + radius : maxX; @@ -275,9 +273,9 @@ else { // POLY - for (var j = 0; j < points.length; j+=2) + for (var j = 0; j < points.length; j+=2) { - + x = points[j]; y = points[j+1]; @@ -286,17 +284,14 @@ minY = y-lineWidth < minY ? y-lineWidth : minY; maxY = y+lineWidth > maxY ? y+lineWidth : maxY; - }; + } } - - }; + } this.bounds = new PIXI.Rectangle(minX, minY, maxX - minX, maxY - minY); - } - // console.log(this.bounds); -} +}; // SOME TYPES: PIXI.Graphics.POLY = 0; diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index af76ca4..c3398f1 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -11,7 +11,7 @@ PIXI.CanvasGraphics = function() { -} +}; /* @@ -27,28 +27,28 @@ { var worldAlpha = graphics.worldAlpha; - for (var i=0; i < graphics.graphicsData.length; i++) + for (var i = 0; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; var points = data.points; - context.strokeStyle = color = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); + context.strokeStyle = '#' + ('00000' + ( data.lineColor | 0).toString(16)).substr(-6); context.lineWidth = data.lineWidth; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } @@ -56,7 +56,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -65,13 +65,13 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { if(data.fillColor || data.fillColor === 0) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fillRect(points[0], points[1], points[2], points[3]); } @@ -82,7 +82,7 @@ } } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); @@ -92,7 +92,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -101,7 +101,7 @@ context.stroke(); } } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -135,7 +135,7 @@ if(data.fill) { context.globalAlpha = data.fillAlpha * worldAlpha; - context.fillStyle = color = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); + context.fillStyle = '#' + ('00000' + ( data.fillColor | 0).toString(16)).substr(-6); context.fill(); } if(data.lineWidth) @@ -146,7 +146,7 @@ } } -} +}; /* * Renders a graphics mask @@ -159,53 +159,51 @@ */ PIXI.CanvasGraphics.renderGraphicsMask = function(graphics, context) { - var worldAlpha = graphics.worldAlpha; - var len = graphics.graphicsData.length; - if(len === 0)return; + if(len === 0) return; if(len > 1) { len = 1; - console.log("Pixi.js warning: masks in canvas can only mask using the first path in the graphics object") + window.console.log('Pixi.js warning: masks in canvas can only mask using the first path in the graphics object'); } - for (var i=0; i < 1; i++) + for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; var points = data.points; - if(data.type == PIXI.Graphics.POLY) + if(data.type === PIXI.Graphics.POLY) { context.beginPath(); context.moveTo(points[0], points[1]); - for (var j=1; j < points.length/2; j++) + for (var j = 1; j < points.length / 2; j++) { context.lineTo(points[j * 2], points[j * 2 + 1]); } // if the first and last point are the same close the path - much neater :) - if(points[0] == points[points.length-2] && points[1] == points[points.length-1]) + if(points[0] === points[points.length-2] && points[1] === points[points.length-1]) { context.closePath(); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); context.rect(points[0], points[1], points[2], points[3]); context.closePath(); } - else if(data.type == PIXI.Graphics.CIRC) + else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); context.arc(points[0], points[1], points[2],0,2*Math.PI); context.closePath(); } - else if(data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.ELIP) { // elipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas @@ -219,7 +217,7 @@ context.beginPath(); - var kappa = .5522848, + var kappa = 0.5522848, ox = (w / 2) * kappa, // control point offset horizontal oy = (h / 2) * kappa, // control point offset vertical xe = x + w, // x-end @@ -234,7 +232,5 @@ context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); context.closePath(); } - - - }; -} + } +}; diff --git a/src/pixi/renderers/canvas/CanvasRenderer.js b/src/pixi/renderers/canvas/CanvasRenderer.js index eea1f93..a2dbb5e 100644 --- a/src/pixi/renderers/canvas/CanvasRenderer.js +++ b/src/pixi/renderers/canvas/CanvasRenderer.js @@ -2,7 +2,6 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - /** * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL. * Dont forget to add the view to your DOM or you will not see anything :) @@ -49,16 +48,16 @@ * @property context * @type Canvas 2d Context */ - this.context = this.view.getContext("2d"); + this.context = this.view.getContext('2d'); this.refresh = true; // hack to enable some hardware acceleration! //this.view.style["transform"] = "translatez(0)"; - + this.view.width = this.width; - this.view.height = this.height; + this.view.height = this.height; this.count = 0; -} +}; // constructor PIXI.CanvasRenderer.prototype.constructor = PIXI.CanvasRenderer; @@ -71,25 +70,25 @@ */ PIXI.CanvasRenderer.prototype.render = function(stage) { - //stage.__childrenAdded = []; //stage.__childrenRemoved = []; - + // update textures if need be PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; - + PIXI.visibleCount++; stage.updateTransform(); - - // update the background color - if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString; - this.context.setTransform(1,0,0,1,0,0); - this.context.clearRect(0, 0, this.width, this.height) + // update the background color + if(this.view.style.backgroundColor !== stage.backgroundColorString && !this.transparent) + this.view.style.backgroundColor = stage.backgroundColorString; + + this.context.setTransform(1,0,0,1,0,0); + this.context.clearRect(0, 0, this.width, this.height); this.renderDisplayObject(stage); //as - + // run interaction! if(stage.interactive) { @@ -100,15 +99,13 @@ stage.interactionManager.setTarget(this); } } - + // remove frame updates.. if(PIXI.Texture.frameUpdates.length > 0) { PIXI.Texture.frameUpdates = []; } - - -} +}; /** * resizes the canvas view to the specified width and height @@ -121,10 +118,10 @@ { this.width = width; this.height = height; - + this.view.width = width; this.view.height = height; -} +}; /** * Renders a display object @@ -138,60 +135,59 @@ // no loger recurrsive! var transform; var context = this.context; - + context.globalCompositeOperation = 'source-over'; - - // one the display object hits this. we can break the loop + + // one the display object hits this. we can break the loop var testObject = displayObject.last._iNext; displayObject = displayObject.first; - - do + + do { transform = displayObject.worldTransform; - + if(!displayObject.visible) { displayObject = displayObject.last._iNext; continue; } - + if(!displayObject.renderable) { displayObject = displayObject._iNext; continue; } - + if(displayObject instanceof PIXI.Sprite) { - - var frame = displayObject.texture.frame; + var frame = displayObject.texture.frame; //ignore null sources if(frame && frame.width && frame.height && displayObject.texture.baseTexture.source) { context.globalAlpha = displayObject.worldAlpha; - + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); - - context.drawImage(displayObject.texture.baseTexture.source, + + context.drawImage(displayObject.texture.baseTexture.source, frame.x, frame.y, frame.width, frame.height, - (displayObject.anchor.x) * -frame.width, + (displayObject.anchor.x) * -frame.width, (displayObject.anchor.y) * -frame.height, frame.width, frame.height); - } + } } else if(displayObject instanceof PIXI.Strip) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderStrip(displayObject); } else if(displayObject instanceof PIXI.TilingSprite) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); this.renderTilingSprite(displayObject); } else if(displayObject instanceof PIXI.CustomRenderable) @@ -201,7 +197,7 @@ } else if(displayObject instanceof PIXI.Graphics) { - context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]) + context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]); PIXI.CanvasGraphics.renderGraphics(displayObject, context); } else if(displayObject instanceof PIXI.FilterBlock) @@ -213,19 +209,19 @@ if(displayObject.open) { context.save(); - + var cacheAlpha = mask.alpha; var maskTransform = mask.worldTransform; - - context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]) - + + context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5]); + mask.worldAlpha = 0.5; - + context.worldAlpha = 0; - + PIXI.CanvasGraphics.renderGraphicsMask(mask, context); context.clip(); - + mask.worldAlpha = cacheAlpha; } else @@ -233,20 +229,19 @@ context.restore(); } } + /* else { // only masks supported right now! } + */ } - // count++ - displayObject = displayObject._iNext; - - - } - while(displayObject != testObject) - -} + //count++ + displayObject = displayObject._iNext; + } + while(displayObject !== testObject); +}; /** * Renders a flat strip @@ -259,31 +254,28 @@ { var context = this.context; var verticies = strip.verticies; - var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - + context.beginPath(); - for (var i=1; i < length-2; i++) + for (var i=1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - + + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + context.moveTo(x0, y0); context.lineTo(x1, y1); context.lineTo(x2, y2); - - }; - - context.fillStyle = "#FF0000"; + } + + context.fillStyle = '#FF0000'; context.fill(); context.closePath(); -} +}; /** * Renders a tiling sprite @@ -295,28 +287,29 @@ PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite) { var context = this.context; - + context.globalAlpha = sprite.worldAlpha; - - if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, "repeat"); - + + if(!sprite.__tilePattern) + sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, 'repeat'); + context.beginPath(); - + var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + // offset context.scale(tileScale.x,tileScale.y); context.translate(tilePosition.x, tilePosition.y); - + context.fillStyle = sprite.__tilePattern; context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width / tileScale.x, sprite.height / tileScale.y); - + context.scale(1/tileScale.x, 1/tileScale.y); context.translate(-tilePosition.x, -tilePosition.y); - + context.closePath(); -} +}; /** * Renders a strip @@ -332,21 +325,20 @@ // draw triangles!! var verticies = strip.verticies; var uvs = strip.uvs; - + var length = verticies.length/2; this.count++; - for (var i=1; i < length-2; i++) + + for (var i = 1; i < length-2; i++) { - // draw some triangles! var index = i*2; - - var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; - var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; - - var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; - var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; + var x0 = verticies[index], x1 = verticies[index+2], x2 = verticies[index+4]; + var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5]; + + var u0 = uvs[index] * strip.texture.width, u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width; + var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height; context.save(); context.beginPath(); @@ -354,28 +346,23 @@ context.lineTo(x1, y1); context.lineTo(x2, y2); context.closePath(); - + context.clip(); - - + // Compute matrix transform var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2; - var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; - var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; - var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; - var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; - var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; - var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; - - - - - context.transform(delta_a/delta, delta_d/delta, - delta_b/delta, delta_e/delta, - delta_c/delta, delta_f/delta); - + var deltaA = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2; + var deltaB = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2; + var deltaC = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2; + var deltaD = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2; + var deltaE = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2; + var deltaF = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2; + + context.transform(deltaA / delta, deltaD / delta, + deltaB / delta, deltaE / delta, + deltaC / delta, deltaF / delta); + context.drawImage(strip.texture.baseTexture.source, 0, 0); context.restore(); - }; - -} + } +}; diff --git a/src/pixi/renderers/webgl/PixiShader.js b/src/pixi/renderers/webgl/PixiShader.js index f7fbf85..01721c0 100644 --- a/src/pixi/renderers/webgl/PixiShader.js +++ b/src/pixi/renderers/webgl/PixiShader.js @@ -12,26 +12,25 @@ /** * @property {any} program - The WebGL program. */ - this.program; - + this.program = null; + /** * @property {array} fragmentSrc - The fragment shader. */ this.fragmentSrc = [ - "precision lowp float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;", - "}" + 'precision lowp float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform sampler2D uSampler;', + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor;', + '}' ]; /** * @property {number} textureCount - A local texture counter for multi-texture shaders. */ this.textureCount = 0; - }; /** @@ -39,23 +38,23 @@ */ PIXI.PixiShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc) - + var program = PIXI.compileProgram(this.vertexSrc || PIXI.PixiShader.defaultVertexSrc, this.fragmentSrc); + var gl = PIXI.gl; gl.useProgram(program); - + // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.dimensions = gl.getUniformLocation(program, "dimensions"); - + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.dimensions = gl.getUniformLocation(program, 'dimensions'); + // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + // add those custom shaders! for (var key in this.uniforms) { @@ -64,7 +63,7 @@ } this.initUniforms(); - + this.program = program; }; @@ -80,13 +79,14 @@ this.textureCount = 1; var uniform; - - for (var key in this.uniforms) + + for (var key in this.uniforms) { - var uniform = this.uniforms[key]; + uniform = this.uniforms[key]; + var type = uniform.type; - if (type == 'sampler2D') + if (type === 'sampler2D') { uniform._init = false; @@ -95,21 +95,21 @@ this.initSampler2D(uniform); } } - else if (type == 'mat2' || type == 'mat3' || type == 'mat4') + else if (type === 'mat2' || type === 'mat3' || type === 'mat4') { // These require special handling uniform.glMatrix = true; uniform.glValueLength = 1; - if (type == 'mat2') + if (type === 'mat2') { uniform.glFunc = PIXI.gl.uniformMatrix2fv; } - else if (type == 'mat3') + else if (type === 'mat3') { uniform.glFunc = PIXI.gl.uniformMatrix3fv; } - else if (type == 'mat4') + else if (type === 'mat4') { uniform.glFunc = PIXI.gl.uniformMatrix4fv; } @@ -119,15 +119,15 @@ // GL function reference uniform.glFunc = PIXI.gl['uniform' + type]; - if (type == '2f' || type == '2i') + if (type === '2f' || type === '2i') { uniform.glValueLength = 2; } - else if (type == '3f' || type == '3i') + else if (type === '3f' || type === '3i') { uniform.glValueLength = 3; } - else if (type == '4f' || type == '4i') + else if (type === '4f' || type === '4i') { uniform.glValueLength = 4; } @@ -137,7 +137,7 @@ } } } - + }; /** @@ -224,12 +224,12 @@ var uniform; // This would probably be faster in an array and it would guarantee key order - for (var key in this.uniforms) + for (var key in this.uniforms) { uniform = this.uniforms[key]; - if (uniform.glValueLength == 1) + if (uniform.glValueLength === 1) { if (uniform.glMatrix === true) { @@ -240,19 +240,19 @@ uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value); } } - else if (uniform.glValueLength == 2) + else if (uniform.glValueLength === 2) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y); } - else if (uniform.glValueLength == 3) + else if (uniform.glValueLength === 3) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z); } - else if (uniform.glValueLength == 4) + else if (uniform.glValueLength === 4) { uniform.glFunc.call(PIXI.gl, uniform.uniformLocation, uniform.value.x, uniform.value.y, uniform.value.z, uniform.value.w); } - else if (uniform.type == 'sampler2D') + else if (uniform.type === 'sampler2D') { if (uniform._init) { @@ -267,26 +267,25 @@ } } } - + }; PIXI.PixiShader.defaultVertexSrc = [ - - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "varying vec2 vTextureCoord;", + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'varying vec2 vTextureCoord;', - "varying float vColor;", + 'varying float vColor;', - "const vec2 center = vec2(-1.0, 1.0);", - - "void main(void) {", - "gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'const vec2 center = vec2(-1.0, 1.0);', + + 'void main(void) {', + ' gl_Position = vec4( ((aVertexPosition + offsetVector) / projectionVector) + center , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; diff --git a/src/pixi/renderers/webgl/PrimitiveShader.js b/src/pixi/renderers/webgl/PrimitiveShader.js index 1089d84..b206e79 100644 --- a/src/pixi/renderers/webgl/PrimitiveShader.js +++ b/src/pixi/renderers/webgl/PrimitiveShader.js @@ -5,53 +5,54 @@ PIXI.PrimitiveShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec4 vColor;", - "void main(void) {", - "gl_FragColor = vColor;", - "}" + 'precision mediump float;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' gl_FragColor = vColor;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec4 aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "uniform vec2 offsetVector;", - "uniform float alpha;", - "varying vec4 vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);", - "vColor = aColor * alpha;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec4 aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'uniform vec2 offsetVector;', + 'uniform float alpha;', + 'varying vec4 vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition , 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / -projectionVector.y + 1.0 , 0.0, 1.0);', + ' vColor = aColor * alpha;', + '}' ]; - -} +}; PIXI.PrimitiveShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - - var gl = PIXI.gl; - - gl.useProgram(program); - - // get and store the uniforms for the shader - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); - this.program = program; -} + var gl = PIXI.gl; + + gl.useProgram(program); + + // get and store the uniforms for the shader + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/StripShader.js b/src/pixi/renderers/webgl/StripShader.js index 80d8394..e82f33a 100644 --- a/src/pixi/renderers/webgl/StripShader.js +++ b/src/pixi/renderers/webgl/StripShader.js @@ -5,61 +5,63 @@ PIXI.StripShader = function() { - // the webGL program.. - this.program; - + // the webGL program.. + this.program = null; + this.fragmentSrc = [ - "precision mediump float;", - "varying vec2 vTextureCoord;", - "varying float vColor;", - "uniform float alpha;", - "uniform sampler2D uSampler;", - "void main(void) {", - "gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));", - "gl_FragColor = gl_FragColor * alpha;", - "}" + 'precision mediump float;', + 'varying vec2 vTextureCoord;', + 'varying float vColor;', + 'uniform float alpha;', + 'uniform sampler2D uSampler;', + + 'void main(void) {', + ' gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));', + ' gl_FragColor = gl_FragColor * alpha;', + '}' ]; this.vertexSrc = [ - "attribute vec2 aVertexPosition;", - "attribute vec2 aTextureCoord;", - "attribute float aColor;", - "uniform mat3 translationMatrix;", - "uniform vec2 projectionVector;", - "varying vec2 vTextureCoord;", - "varying vec2 offsetVector;", - "varying float vColor;", - "void main(void) {", - "vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);", - "v -= offsetVector.xyx;", - "gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);", - "vTextureCoord = aTextureCoord;", - "vColor = aColor;", - "}" + 'attribute vec2 aVertexPosition;', + 'attribute vec2 aTextureCoord;', + 'attribute float aColor;', + 'uniform mat3 translationMatrix;', + 'uniform vec2 projectionVector;', + 'varying vec2 vTextureCoord;', + 'varying vec2 offsetVector;', + 'varying float vColor;', + + 'void main(void) {', + ' vec3 v = translationMatrix * vec3(aVertexPosition, 1.0);', + ' v -= offsetVector.xyx;', + ' gl_Position = vec4( v.x / projectionVector.x -1.0, v.y / projectionVector.y + 1.0 , 0.0, 1.0);', + ' vTextureCoord = aTextureCoord;', + ' vColor = aColor;', + '}' ]; -} +}; PIXI.StripShader.prototype.init = function() { - var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc) - - var gl = PIXI.gl; - + var program = PIXI.compileProgram(this.vertexSrc, this.fragmentSrc); + + var gl = PIXI.gl; + gl.useProgram(program); - // get and store the uniforms for the shader - this.uSampler = gl.getUniformLocation(program, "uSampler"); - this.projectionVector = gl.getUniformLocation(program, "projectionVector"); - this.offsetVector = gl.getUniformLocation(program, "offsetVector"); - this.colorAttribute = gl.getAttribLocation(program, "aColor"); - //this.dimensions = gl.getUniformLocation(this.program, "dimensions"); - - // get and store the attributes - this.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); - this.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord"); - - this.translationMatrix = gl.getUniformLocation(program, "translationMatrix"); - this.alpha = gl.getUniformLocation(program, "alpha"); - - this.program = program; -} + // get and store the uniforms for the shader + this.uSampler = gl.getUniformLocation(program, 'uSampler'); + this.projectionVector = gl.getUniformLocation(program, 'projectionVector'); + this.offsetVector = gl.getUniformLocation(program, 'offsetVector'); + this.colorAttribute = gl.getAttribLocation(program, 'aColor'); + //this.dimensions = gl.getUniformLocation(this.program, 'dimensions'); + + // get and store the attributes + this.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition'); + this.aTextureCoord = gl.getAttribLocation(program, 'aTextureCoord'); + + this.translationMatrix = gl.getUniformLocation(program, 'translationMatrix'); + this.alpha = gl.getUniformLocation(program, 'alpha'); + + this.program = program; +}; diff --git a/src/pixi/renderers/webgl/WebGLBatch.js b/src/pixi/renderers/webgl/WebGLBatch.js index 638150d..ba719b3 100644 --- a/src/pixi/renderers/webgl/WebGLBatch.js +++ b/src/pixi/renderers/webgl/WebGLBatch.js @@ -9,7 +9,7 @@ */ PIXI._getBatch = function(gl) { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(gl); } @@ -17,27 +17,27 @@ { return PIXI._batchs.pop(); } -} +}; /** * @private */ PIXI._returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * @private */ PIXI._restoreBatchs = function(gl) { - for (var i=0; i < PIXI._batchs.length; i++) + for (var i=0; i < PIXI._batchs.length; i++) { - PIXI._batchs[i].restoreLostContext(gl); - }; -} + PIXI._batchs[i].restoreLostContext(gl); + } +}; /** * A WebGLBatch Enables a group of sprites to be drawn using the same settings. @@ -54,7 +54,7 @@ PIXI.WebGLBatch = function(gl) { this.gl = gl; - + this.size = 0; this.vertexBuffer = gl.createBuffer(); @@ -63,7 +63,7 @@ this.colorBuffer = gl.createBuffer(); this.blendMode = PIXI.blendModes.NORMAL; this.dynamicSize = 1; -} +}; // constructor PIXI.WebGLBatch.prototype.constructor = PIXI.WebGLBatch; @@ -83,9 +83,9 @@ this.texture = null; this.last = null; this.size = 0; - this.head; - this.tail; -} + this.head = null; + this.tail = null; +}; /** * Recreates the buffers in the event of a context loss @@ -100,7 +100,7 @@ this.indexBuffer = gl.createBuffer(); this.uvBuffer = gl.createBuffer(); this.colorBuffer = gl.createBuffer(); -} +}; /** * inits the batch's texture and blend mode based if the supplied sprite @@ -108,7 +108,7 @@ * @method init * @param sprite {Sprite} the first sprite to be added to the batch. Only sprites with * the same base texture and blend mode will be allowed to be added to this batch - */ + */ PIXI.WebGLBatch.prototype.init = function(sprite) { sprite.batch = this; @@ -120,7 +120,7 @@ this.size = 1; this.growBatch(); -} +}; /** * inserts a sprite before the specified sprite @@ -128,7 +128,7 @@ * @method insertBefore * @param sprite {Sprite} the sprite to be added * @param nextSprite {nextSprite} the first sprite will be inserted before this sprite - */ + */ PIXI.WebGLBatch.prototype.insertBefore = function(sprite, nextSprite) { this.size++; @@ -148,7 +148,7 @@ { this.head = sprite; } -} +}; /** * inserts a sprite after the specified sprite @@ -156,7 +156,7 @@ * @method insertAfter * @param sprite {Sprite} the sprite to be added * @param previousSprite {Sprite} the first sprite will be inserted after this sprite - */ + */ PIXI.WebGLBatch.prototype.insertAfter = function(sprite, previousSprite) { this.size++; @@ -175,21 +175,21 @@ } else { - this.tail = sprite + this.tail = sprite; } -} +}; /** * removes a sprite from the batch * * @method remove * @param sprite {Sprite} the sprite to be removed - */ + */ PIXI.WebGLBatch.prototype.remove = function(sprite) { this.size--; - if(this.size == 0) + if(this.size === 0) { sprite.batch = null; sprite.__prev = null; @@ -214,14 +214,14 @@ else { this.tail = sprite.__prev; - this.tail.__next = null + this.tail.__next = null; } sprite.batch = null; sprite.__next = null; sprite.__prev = null; this.dirty = true; -} +}; /** * Splits the batch into two with the specified sprite being the start of the new batch. @@ -262,13 +262,13 @@ this.size -= tempSize; return batch; -} +}; /** * Merges two batchs together * * @method merge - * @param batch {WebGLBatch} the batch that will be merged + * @param batch {WebGLBatch} the batch that will be merged */ PIXI.WebGLBatch.prototype.merge = function(batch) { @@ -287,7 +287,7 @@ sprite.batch = this; sprite = sprite.__next; } -} +}; /** * Grows the size of the batch. As the elements in the batch cannot have a dynamic size this @@ -299,14 +299,15 @@ PIXI.WebGLBatch.prototype.growBatch = function() { var gl = this.gl; - if( this.size == 1) + if( this.size === 1) { this.dynamicSize = 1; } else { - this.dynamicSize = this.size * 1.5 + this.dynamicSize = this.size * 1.5; } + // grow verts this.verticies = new Float32Array(this.dynamicSize * 8); @@ -325,10 +326,10 @@ this.dirtyColors = true; - this.indices = new Uint16Array(this.dynamicSize * 6); + this.indices = new Uint16Array(this.dynamicSize * 6); var length = this.indices.length/6; - for (var i=0; i < length; i++) + for (var i = 0; i < length; i++) { var index2 = i * 6; var index3 = i * 4; @@ -338,11 +339,11 @@ this.indices[index2 + 3] = index3 + 0; this.indices[index2 + 4] = index3 + 2; this.indices[index2 + 5] = index3 + 3; - }; + } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.indices, gl.STATIC_DRAW); -} +}; /** * Refresh's all the data in the batch and sync's it with the webGL buffers @@ -351,16 +352,13 @@ */ PIXI.WebGLBatch.prototype.refresh = function() { - var gl = this.gl; - if (this.dynamicSize < this.size) { this.growBatch(); } var indexRun = 0; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; - var a, b, c, d, tx, ty; + var index, colorIndex; var displayObject = this.head; @@ -381,7 +379,7 @@ this.uvs[index +3] = frame.y / th; this.uvs[index +4] = (frame.x + frame.width) / tw; - this.uvs[index +5] = (frame.y + frame.height) / th; + this.uvs[index +5] = (frame.y + frame.height) / th; this.uvs[index +6] = frame.x / tw; this.uvs[index +7] = (frame.y + frame.height) / th; @@ -393,12 +391,12 @@ displayObject = displayObject.__next; - indexRun ++; + indexRun++; } this.dirtyUVS = true; this.dirtyColors = true; -} +}; /** * Updates all the relevant geometry and uploads the data to the GPU @@ -407,8 +405,7 @@ */ PIXI.WebGLBatch.prototype.update = function() { - var gl = this.gl; - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, index2, index3 + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index; var a, b, c, d, tx, ty; @@ -418,7 +415,7 @@ var verticies = this.verticies; var uvs = this.uvs; var colors = this.colors; - + while(displayObject) { if(displayObject.vcount === PIXI.visibleCount) @@ -446,17 +443,17 @@ tx = worldTransform[2]; ty = worldTransform[5]; - verticies[index + 0 ] = a * w1 + c * h1 + tx; + verticies[index + 0 ] = a * w1 + c * h1 + tx; verticies[index + 1 ] = d * h1 + b * w1 + ty; - verticies[index + 2 ] = a * w0 + c * h1 + tx; - verticies[index + 3 ] = d * h1 + b * w0 + ty; + verticies[index + 2 ] = a * w0 + c * h1 + tx; + verticies[index + 3 ] = d * h1 + b * w0 + ty; - verticies[index + 4 ] = a * w0 + c * h0 + tx; - verticies[index + 5 ] = d * h0 + b * w0 + ty; + verticies[index + 4 ] = a * w0 + c * h0 + tx; + verticies[index + 5 ] = d * h0 + b * w0 + ty; - verticies[index + 6] = a * w1 + c * h0 + tx; - verticies[index + 7] = d * h0 + b * w1 + ty; + verticies[index + 6] = a * w1 + c * h0 + tx; + verticies[index + 7] = d * h0 + b * w1 + ty; if(displayObject.updateFrame || displayObject.texture.updateFrame) { @@ -475,7 +472,7 @@ uvs[index +3] = frame.y / th; uvs[index +4] = (frame.x + frame.width) / tw; - uvs[index +5] = (frame.y + frame.height) / th; + uvs[index +5] = (frame.y + frame.height) / th; uvs[index +6] = frame.x / tw; uvs[index +7] = (frame.y + frame.height) / th; @@ -484,7 +481,7 @@ } // TODO this probably could do with some optimisation.... - if(displayObject.cacheAlpha != displayObject.worldAlpha) + if(displayObject.cacheAlpha !== displayObject.worldAlpha) { displayObject.cacheAlpha = displayObject.worldAlpha; @@ -502,8 +499,8 @@ indexRun++; displayObject = displayObject.__next; - } -} + } +}; /** * Draws the batch to the frame buffer @@ -514,15 +511,16 @@ { start = start || 0; - if(end == undefined)end = this.size; - + if(end === undefined) + end = this.size; + if(this.dirty) { this.refresh(); this.dirty = false; } - if (this.size == 0)return; + if (this.size === 0)return; this.update(); var gl = this.gl; @@ -530,13 +528,13 @@ //TODO optimize this! var shaderProgram = PIXI.defaultShader; - + //gl.useProgram(shaderProgram); // update the verts.. gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); // ok.. - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.verticies); gl.vertexAttribPointer(shaderProgram.aVertexPosition, 2, gl.FLOAT, false, 0, 0); // update the uvs //var isDefault = (shaderProgram == PIXI.shaderProgram) @@ -571,4 +569,4 @@ // DRAW THAT this! gl.drawElements(gl.TRIANGLES, len * 6, gl.UNSIGNED_SHORT, start * 2 * 6 ); -} +}; diff --git a/src/pixi/renderers/webgl/WebGLFilterManager.js b/src/pixi/renderers/webgl/WebGLFilterManager.js index a98afb4..2dd4b75 100644 --- a/src/pixi/renderers/webgl/WebGLFilterManager.js +++ b/src/pixi/renderers/webgl/WebGLFilterManager.js @@ -5,524 +5,507 @@ PIXI.WebGLFilterManager = function(transparent) { - this.transparent = transparent; - - this.filterStack = []; - this.texturePool = []; - - this.offsetX = 0; - this.offsetY = 0; - - this.initShaderBuffers(); -} + this.transparent = transparent; + + this.filterStack = []; + this.texturePool = []; + + this.offsetX = 0; + this.offsetY = 0; + + this.initShaderBuffers(); +}; // API PIXI.WebGLFilterManager.prototype.begin = function(projection, buffer) { - this.width = projection.x * 2; - this.height = -projection.y * 2; - this.buffer = buffer; -} + this.width = projection.x * 2; + this.height = -projection.y * 2; + this.buffer = buffer; +}; PIXI.WebGLFilterManager.prototype.pushFilter = function(filterBlock) { - var gl = PIXI.gl; + var gl = PIXI.gl; - // filter program - // OPTIMISATION - the first filter is free if its a simple color change? - this.filterStack.push(filterBlock); + // filter program + // OPTIMISATION - the first filter is free if its a simple color change? + this.filterStack.push(filterBlock); - var filter = filterBlock.filterPasses[0]; + var filter = filterBlock.filterPasses[0]; - + this.offsetX += filterBlock.target.filterArea.x; + this.offsetY += filterBlock.target.filterArea.y; - this.offsetX += filterBlock.target.filterArea.x; - this.offsetY += filterBlock.target.filterArea.y; - - - - - - var texture = this.texturePool.pop(); - if(!texture) - { - texture = new PIXI.FilterTexture(this.width, this.height); - } - else - { - texture.resize(this.width, this.height); - } + var texture = this.texturePool.pop(); + if(!texture) + { + texture = new PIXI.FilterTexture(this.width, this.height); + } + else + { + texture.resize(this.width, this.height); + } - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - this.getBounds(filterBlock.target); - - // addpadding? - //displayObject.filterArea.x + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - var filterArea = filterBlock.target.filterArea; + this.getBounds(filterBlock.target); - var padidng = filter.padding; - filterArea.x -= padidng; - filterArea.y -= padidng; - filterArea.width += padidng * 2; - filterArea.height += padidng * 2; + // addpadding? + //displayObject.filterArea.x - // cap filter to screen size.. - if(filterArea.x < 0)filterArea.x = 0; - if(filterArea.width > this.width)filterArea.width = this.width; - if(filterArea.y < 0)filterArea.y = 0; - if(filterArea.height > this.height)filterArea.height = this.height; + var filterArea = filterBlock.target.filterArea; + var padidng = filter.padding; + filterArea.x -= padidng; + filterArea.y -= padidng; + filterArea.width += padidng * 2; + filterArea.height += padidng * 2; - //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - - // console.log(filterArea) - // set view port - gl.viewport(0, 0, filterArea.width, filterArea.height); - - PIXI.projection.x = filterArea.width/2; - PIXI.projection.y = -filterArea.height/2; - - PIXI.offset.x = -filterArea.x; - PIXI.offset.y = -filterArea.y; + // cap filter to screen size.. + if(filterArea.x < 0)filterArea.x = 0; + if(filterArea.width > this.width)filterArea.width = this.width; + if(filterArea.y < 0)filterArea.y = 0; + if(filterArea.height > this.height)filterArea.height = this.height; - //console.log(PIXI.defaultShader.projectionVector) - // update projection - gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); - //PIXI.primitiveProgram + //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer); - gl.colorMask(true, true, true, true); - gl.clearColor(0,0,0, 0); - gl.clear(gl.COLOR_BUFFER_BIT); - - //filter.texture = texture; - filterBlock._glFilterTexture = texture; + //console.log(filterArea) + // set view port + gl.viewport(0, 0, filterArea.width, filterArea.height); - //console.log("PUSH") -} + PIXI.projection.x = filterArea.width/2; + PIXI.projection.y = -filterArea.height/2; + + PIXI.offset.x = -filterArea.x; + PIXI.offset.y = -filterArea.y; + + //console.log(PIXI.defaultShader.projectionVector) + // update projection + gl.uniform2f(PIXI.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -filterArea.x, -filterArea.y); + //PIXI.primitiveProgram + + gl.colorMask(true, true, true, true); + gl.clearColor(0,0,0, 0); + gl.clear(gl.COLOR_BUFFER_BIT); + + //filter.texture = texture; + filterBlock._glFilterTexture = texture; + + //console.log("PUSH") +}; PIXI.WebGLFilterManager.prototype.popFilter = function() { - - var gl = PIXI.gl; - - var filterBlock = this.filterStack.pop(); + var gl = PIXI.gl; + var filterBlock = this.filterStack.pop(); + var filterArea = filterBlock.target.filterArea; + var texture = filterBlock._glFilterTexture; + + if(filterBlock.filterPasses.length > 1) + { + gl.viewport(0, 0, filterArea.width, filterArea.height); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + + this.vertexArray[0] = 0; + this.vertexArray[1] = filterArea.height; + + this.vertexArray[2] = filterArea.width; + this.vertexArray[3] = filterArea.height; + + this.vertexArray[4] = 0; + this.vertexArray[5] = 0; + + this.vertexArray[6] = filterArea.width; + this.vertexArray[7] = 0; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + // nnow set the uvs.. + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; + + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + + var inputTexture = texture; + var outputTexture = this.texturePool.pop(); + if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); + + // need to clear this FBO as it may have some left over elements from a prvious filter. + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.disable(gl.BLEND); + + for (var i = 0; i < filterBlock.filterPasses.length-1; i++) + { + var filterPass = filterBlock.filterPasses[i]; + + gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); + + // set texture + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); + + // draw texture.. + //filterPass.applyFilterPass(filterArea.width, filterArea.height); + this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + + // swap the textures.. + var temp = inputTexture; + inputTexture = outputTexture; + outputTexture = temp; + } + + gl.enable(gl.BLEND); + + texture = inputTexture; + this.texturePool.push(outputTexture); + } + + var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; + + this.offsetX -= filterArea.x; + this.offsetY -= filterArea.y; + + + var sizeX = this.width; + var sizeY = this.height; + + var offsetX = 0; + var offsetY = 0; + + var buffer = this.buffer; + + // time to render the filters texture to the previous scene + if(this.filterStack.length === 0) + { + gl.colorMask(true, true, true, this.transparent); + } + else + { + var currentFilter = this.filterStack[this.filterStack.length-1]; + filterArea = currentFilter.target.filterArea; + + sizeX = filterArea.width; + sizeY = filterArea.height; + + offsetX = filterArea.x; + offsetY = filterArea.y; + + buffer = currentFilter._glFilterTexture.frameBuffer; + } - var filterArea = filterBlock.target.filterArea; + // TODO need toremove thease global elements.. + PIXI.projection.x = sizeX/2; + PIXI.projection.y = -sizeY/2; - var texture = filterBlock._glFilterTexture; + PIXI.offset.x = offsetX; + PIXI.offset.y = offsetY; - if(filterBlock.filterPasses.length > 1) - { - gl.viewport(0, 0, filterArea.width, filterArea.height); + filterArea = filterBlock.target.filterArea; - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = 0; - this.vertexArray[1] = filterArea.height; - - this.vertexArray[2] = filterArea.width; - this.vertexArray[3] = filterArea.height; - - this.vertexArray[4] = 0; - this.vertexArray[5] = 0; - - this.vertexArray[6] = filterArea.width; - this.vertexArray[7] = 0; + var x = filterArea.x-offsetX; + var y = filterArea.y-offsetY; + // update the buffers.. + // make sure to flip the y! + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); + this.vertexArray[0] = x; + this.vertexArray[1] = y + filterArea.height; - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - // nnow set the uvs.. - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); + this.vertexArray[2] = x + filterArea.width; + this.vertexArray[3] = y + filterArea.height; - var inputTexture = texture; - var outputTexture = this.texturePool.pop(); - if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.width, this.height); - - // need to clear this FBO as it may have some left over elements from a prvious filter. - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - gl.clear(gl.COLOR_BUFFER_BIT); - - gl.disable(gl.BLEND); - - for (var i = 0; i < filterBlock.filterPasses.length-1; i++) - { - var filterPass = filterBlock.filterPasses[i]; - - gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer ); - - // set texture - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture); - - // draw texture.. - //filterPass.applyFilterPass(filterArea.width, filterArea.height); - this.applyFilterPass(filterPass, filterArea, filterArea.width, filterArea.height); + this.vertexArray[4] = x; + this.vertexArray[5] = y; - // swap the textures.. - var temp = inputTexture; - inputTexture = outputTexture; - outputTexture = temp; - - }; + this.vertexArray[6] = x + filterArea.width; + this.vertexArray[7] = y; - gl.enable(gl.BLEND); + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - texture = inputTexture; - this.texturePool.push(outputTexture); - } + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1]; - - this.offsetX -= filterArea.x; - this.offsetY -= filterArea.y; + this.uvArray[2] = filterArea.width/this.width; + this.uvArray[5] = filterArea.height/this.height; + this.uvArray[6] = filterArea.width/this.width; + this.uvArray[7] = filterArea.height/this.height; - - var sizeX = this.width; - var sizeY = this.height; - - var offsetX = 0; - var offsetY = 0; - - var buffer = this.buffer; - - // time to render the filters texture to the previous scene - if(this.filterStack.length === 0) - { - gl.colorMask(true, true, true, this.transparent); - } - else - { - var currentFilter = this.filterStack[this.filterStack.length-1]; - var filterArea = currentFilter.target.filterArea; - - sizeX = filterArea.width; - sizeY = filterArea.height; - - offsetX = filterArea.x; - offsetY = filterArea.y; - - buffer = currentFilter._glFilterTexture.frameBuffer; - } - - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - // TODO need toremove thease global elements.. - PIXI.projection.x = sizeX/2; - PIXI.projection.y = -sizeY/2; + gl.viewport(0, 0, sizeX, sizeY); + // bind the buffer + gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - PIXI.offset.x = offsetX; - PIXI.offset.y = offsetY; - - - var filterArea = filterBlock.target.filterArea; - var x = filterArea.x-offsetX; - var y = filterArea.y-offsetY; - - // update the buffers.. - // make sure to flip the y! - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - - this.vertexArray[0] = x; - this.vertexArray[1] = y + filterArea.height; - - this.vertexArray[2] = x + filterArea.width; - this.vertexArray[3] = y + filterArea.height; - - this.vertexArray[4] = x; - this.vertexArray[5] = y; - - this.vertexArray[6] = x + filterArea.width; - this.vertexArray[7] = y; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - - this.uvArray[2] = filterArea.width/this.width; - this.uvArray[5] = filterArea.height/this.height; - this.uvArray[6] = filterArea.width/this.width; - this.uvArray[7] = filterArea.height/this.height; - - gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray); - - gl.viewport(0, 0, sizeX, sizeY); - // bind the buffer - gl.bindFramebuffer(gl.FRAMEBUFFER, buffer ); - - // set texture + // set texture gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, texture.texture); - - // apply! - //filter.applyFilterPass(sizeX, sizeY); - this.applyFilterPass(filter, filterArea, sizeX, sizeY); + gl.bindTexture(gl.TEXTURE_2D, texture.texture); - // now restore the regular shader.. + // apply! + //filter.applyFilterPass(sizeX, sizeY); + this.applyFilterPass(filter, filterArea, sizeX, sizeY); + + // now restore the regular shader.. gl.useProgram(PIXI.defaultShader.program); - gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); - gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); + gl.uniform2f(PIXI.defaultShader.projectionVector, sizeX/2, -sizeY/2); + gl.uniform2f(PIXI.defaultShader.offsetVector, -offsetX, -offsetY); - // return the texture to the pool - this.texturePool.push(texture); - filterBlock._glFilterTexture = null; -} + // return the texture to the pool + this.texturePool.push(texture); + filterBlock._glFilterTexture = null; +}; PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea, width, height) { - // use program - var gl = PIXI.gl; + // use program + var gl = PIXI.gl; + var shader = filter.shader; - if(!filter.shader) - { - var shader = new PIXI.PixiShader(); - - shader.fragmentSrc = filter.fragmentSrc; - shader.uniforms = filter.uniforms; - shader.init(); - - filter.shader = shader; - } + if(!shader) + { + shader = new PIXI.PixiShader(); - var shader = filter.shader; - - // set the shader - gl.useProgram(shader.program); + shader.fragmentSrc = filter.fragmentSrc; + shader.uniforms = filter.uniforms; + shader.init(); - gl.uniform2f(shader.projectionVector, width/2, -height/2); - gl.uniform2f(shader.offsetVector, 0,0) + filter.shader = shader; + } - if(filter.uniforms.dimensions) - { - //console.log(filter.uniforms.dimensions) - filter.uniforms.dimensions.value[0] = this.width;//width; - filter.uniforms.dimensions.value[1] = this.height;//height; - filter.uniforms.dimensions.value[2] = this.vertexArray[0]; - filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; - // console.log(this.vertexArray[5]) - } + // set the shader + gl.useProgram(shader.program); - shader.syncUniforms(); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.uniform2f(shader.projectionVector, width/2, -height/2); + gl.uniform2f(shader.offsetVector, 0,0); + + if(filter.uniforms.dimensions) + { + //console.log(filter.uniforms.dimensions) + filter.uniforms.dimensions.value[0] = this.width;//width; + filter.uniforms.dimensions.value[1] = this.height;//height; + filter.uniforms.dimensions.value[2] = this.vertexArray[0]; + filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height; + // console.log(this.vertexArray[5]) + } + + shader.syncUniforms(); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - - // draw the filter... + + // draw the filter... gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0 ); -} +}; PIXI.WebGLFilterManager.prototype.initShaderBuffers = function() { - var gl = PIXI.gl; - - // create some buffers - this.vertexBuffer = gl.createBuffer(); - this.uvBuffer = gl.createBuffer(); - this.indexBuffer = gl.createBuffer(); - - // bind and upload the vertexs.. - // keep a refferance to the vertexFloatData.. - this.vertexArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.vertexArray, + var gl = PIXI.gl; + + // create some buffers + this.vertexBuffer = gl.createBuffer(); + this.uvBuffer = gl.createBuffer(); + this.indexBuffer = gl.createBuffer(); + + // bind and upload the vertexs.. + // keep a refferance to the vertexFloatData.. + this.vertexArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.vertexArray, gl.STATIC_DRAW); - - + + // bind and upload the uv buffer - this.uvArray = new Float32Array([0.0, 0.0, - 1.0, 0.0, - 0.0, 1.0, - 1.0, 1.0]); - - gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); - gl.bufferData( - gl.ARRAY_BUFFER, - this.uvArray, + this.uvArray = new Float32Array([0.0, 0.0, + 1.0, 0.0, + 0.0, 1.0, + 1.0, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer); + gl.bufferData( + gl.ARRAY_BUFFER, + this.uvArray, gl.STATIC_DRAW); - - // bind and upload the index - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - gl.bufferData( - gl.ELEMENT_ARRAY_BUFFER, - new Uint16Array([0, 1, 2, 1, 3, 2]), + + // bind and upload the index + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); + gl.bufferData( + gl.ELEMENT_ARRAY_BUFFER, + new Uint16Array([0, 1, 2, 1, 3, 2]), gl.STATIC_DRAW); -} +}; PIXI.WebGLFilterManager.prototype.getBounds = function(displayObject) { - // time to get the width and height of the object! - var worldTransform, width, height, aX, aY, w0, w1, h0, h1, index, doTest; - var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; + // time to get the width and height of the object! + var worldTransform, width, height, aX, aY, w0, w1, h0, h1, doTest; + var a, b, c, d, tx, ty, x1, x2, x3, x4, y1, y2, y3, y4; - var tempObject = displayObject.first; - var testObject = displayObject.last._iNext; - - var maxX = -Infinity; - var maxY = -Infinity; - - var minX = Infinity; - var minY = Infinity; - - do - { - // TODO can be optimized! - what if there is no scale / rotation? - - if(tempObject.visible) - { - if(tempObject instanceof PIXI.Sprite) - { - width = tempObject.texture.frame.width; - height = tempObject.texture.frame.height; + var tempObject = displayObject.first; + var testObject = displayObject.last._iNext; - // TODO trim?? - aX = tempObject.anchor.x; - aY = tempObject.anchor.y; - w0 = width * (1-aX); - w1 = width * -aX; + var maxX = -Infinity; + var maxY = -Infinity; - h0 = height * (1-aY); - h1 = height * -aY; + var minX = Infinity; + var minY = Infinity; - doTest = true; - } - else if(tempObject instanceof PIXI.Graphics) - { - tempObject.updateFilterBounds(); + do + { + // TODO can be optimized! - what if there is no scale / rotation? - var bounds = tempObject.bounds; + if(tempObject.visible) + { + if(tempObject instanceof PIXI.Sprite) + { + width = tempObject.texture.frame.width; + height = tempObject.texture.frame.height; - width = bounds.width; - height = bounds.height; + // TODO trim?? + aX = tempObject.anchor.x; + aY = tempObject.anchor.y; + w0 = width * (1-aX); + w1 = width * -aX; - w0 = bounds.x - w1 = bounds.x + bounds.width; + h0 = height * (1-aY); + h1 = height * -aY; - h0 = bounds.y - h1 = bounds.y + bounds.height; + doTest = true; + } + else if(tempObject instanceof PIXI.Graphics) + { + tempObject.updateFilterBounds(); - doTest = true; - } - } - - if(doTest) - { - worldTransform = tempObject.worldTransform; + var bounds = tempObject.bounds; - a = worldTransform[0]; - b = worldTransform[3]; - c = worldTransform[1]; - d = worldTransform[4]; - tx = worldTransform[2]; - ty = worldTransform[5]; + width = bounds.width; + height = bounds.height; - x1 = a * w1 + c * h1 + tx; - y1 = d * h1 + b * w1 + ty; + w0 = bounds.x; + w1 = bounds.x + bounds.width; - x2 = a * w0 + c * h1 + tx; - y2 = d * h1 + b * w0 + ty; + h0 = bounds.y; + h1 = bounds.y + bounds.height; - x3 = a * w0 + c * h0 + tx; - y3 = d * h0 + b * w0 + ty; + doTest = true; + } + } - x4 = a * w1 + c * h0 + tx; - y4 = d * h0 + b * w1 + ty; + if(doTest) + { + worldTransform = tempObject.worldTransform; - minX = x1 < minX ? x1 : minX; - minX = x2 < minX ? x2 : minX; - minX = x3 < minX ? x3 : minX; - minX = x4 < minX ? x4 : minX; - - minY = y1 < minY ? y1 : minY; - minY = y2 < minY ? y2 : minY; - minY = y3 < minY ? y3 : minY; - minY = y4 < minY ? y4 : minY; - - maxX = x1 > maxX ? x1 : maxX; - maxX = x2 > maxX ? x2 : maxX; - maxX = x3 > maxX ? x3 : maxX; - maxX = x4 > maxX ? x4 : maxX; - - maxY = y1 > maxY ? y1 : maxY; - maxY = y2 > maxY ? y2 : maxY; - maxY = y3 > maxY ? y3 : maxY; - maxY = y4 > maxY ? y4 : maxY; - } + a = worldTransform[0]; + b = worldTransform[3]; + c = worldTransform[1]; + d = worldTransform[4]; + tx = worldTransform[2]; + ty = worldTransform[5]; - doTest = false; - tempObject = tempObject._iNext; + x1 = a * w1 + c * h1 + tx; + y1 = d * h1 + b * w1 + ty; - } - while(tempObject != testObject) - - // maximum bounds is the size of the screen.. - //minX = minX > 0 ? minX : 0; - //minY = minY > 0 ? minY : 0; + x2 = a * w0 + c * h1 + tx; + y2 = d * h1 + b * w0 + ty; - displayObject.filterArea.x = minX; - displayObject.filterArea.y = minY; + x3 = a * w0 + c * h0 + tx; + y3 = d * h0 + b * w0 + ty; -// console.log(maxX+ " : " + minX) - displayObject.filterArea.width = maxX - minX; - displayObject.filterArea.height = maxY - minY; -} + x4 = a * w1 + c * h0 + tx; + y4 = d * h0 + b * w1 + ty; + + minX = x1 < minX ? x1 : minX; + minX = x2 < minX ? x2 : minX; + minX = x3 < minX ? x3 : minX; + minX = x4 < minX ? x4 : minX; + + minY = y1 < minY ? y1 : minY; + minY = y2 < minY ? y2 : minY; + minY = y3 < minY ? y3 : minY; + minY = y4 < minY ? y4 : minY; + + maxX = x1 > maxX ? x1 : maxX; + maxX = x2 > maxX ? x2 : maxX; + maxX = x3 > maxX ? x3 : maxX; + maxX = x4 > maxX ? x4 : maxX; + + maxY = y1 > maxY ? y1 : maxY; + maxY = y2 > maxY ? y2 : maxY; + maxY = y3 > maxY ? y3 : maxY; + maxY = y4 > maxY ? y4 : maxY; + } + + doTest = false; + tempObject = tempObject._iNext; + + } + while(tempObject !== testObject); + + // maximum bounds is the size of the screen.. + //minX = minX > 0 ? minX : 0; + //minY = minY > 0 ? minY : 0; + + displayObject.filterArea.x = minX; + displayObject.filterArea.y = minY; + +// console.log(maxX+ " : " + minX) + displayObject.filterArea.width = maxX - minX; + displayObject.filterArea.height = maxY - minY; +}; PIXI.FilterTexture = function(width, height) { - var gl = PIXI.gl; - + var gl = PIXI.gl; + // next time to create a frame buffer and texture - this.frameBuffer = gl.createFramebuffer(); + this.frameBuffer = gl.createFramebuffer(); this.texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); - - gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); - gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); - - this.resize(width, height); -} + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer ); + + gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer ); + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0); + + this.resize(width, height); +}; PIXI.FilterTexture.prototype.resize = function(width, height) { - if(this.width == width && this.height == height)return; + if(this.width === width && this.height === height) return; - this.width = width; - this.height = height; + this.width = width; + this.height = height; - var gl = PIXI.gl; + var gl = PIXI.gl; - gl.bindTexture(gl.TEXTURE_2D, this.texture); - gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); - -} \ No newline at end of file + gl.bindTexture(gl.TEXTURE_2D, this.texture); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + +}; diff --git a/src/pixi/renderers/webgl/WebGLGraphics.js b/src/pixi/renderers/webgl/WebGLGraphics.js index b2fac2c..50ba448 100644 --- a/src/pixi/renderers/webgl/WebGLGraphics.js +++ b/src/pixi/renderers/webgl/WebGLGraphics.js @@ -9,8 +9,8 @@ */ PIXI.WebGLGraphics = function() { - -} + +}; /** * Renders the graphics object @@ -24,61 +24,60 @@ PIXI.WebGLGraphics.renderGraphics = function(graphics, projection) { var gl = PIXI.gl; - - if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, + + if(!graphics._webGL)graphics._webGL = {points:[], indices:[], lastIndex:0, buffer:gl.createBuffer(), indexBuffer:gl.createBuffer()}; - + if(graphics.dirty) { graphics.dirty = false; - + if(graphics.clearDirty) { graphics.clearDirty = false; - + graphics._webGL.lastIndex = 0; graphics._webGL.points = []; graphics._webGL.indices = []; - + } - + PIXI.WebGLGraphics.updateGraphics(graphics); } - + PIXI.activatePrimitiveShader(); - + // This could be speeded up fo sure! var m = PIXI.mat3.clone(graphics.worldTransform); - + PIXI.mat3.transpose(m); - - // set the matrix transform for the + + // set the matrix transform for the gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.uniformMatrix3fv(PIXI.primitiveShader.translationMatrix, false, m); - + gl.uniform2f(PIXI.primitiveShader.projectionVector, projection.x, -projection.y); gl.uniform2f(PIXI.primitiveShader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(PIXI.primitiveShader.alpha, graphics.worldAlpha); gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); - + gl.vertexAttribPointer(PIXI.primitiveShader.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0); gl.vertexAttribPointer(PIXI.primitiveShader.colorAttribute, 4, gl.FLOAT, false,4 * 6, 2 * 4); - + // set the index buffer! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); - + gl.drawElements(gl.TRIANGLE_STRIP, graphics._webGL.indices.length, gl.UNSIGNED_SHORT, 0 ); - + PIXI.deactivatePrimitiveShader(); - - + // return to default shader... // PIXI.activateShader(PIXI.defaultShader); -} +}; /** * Updates the graphics object @@ -90,47 +89,47 @@ */ PIXI.WebGLGraphics.updateGraphics = function(graphics) { - for (var i=graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) + for (var i = graphics._webGL.lastIndex; i < graphics.graphicsData.length; i++) { var data = graphics.graphicsData[i]; - - if(data.type == PIXI.Graphics.POLY) + + if(data.type === PIXI.Graphics.POLY) { if(data.fill) { - if(data.points.length>3) - PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); + if(data.points.length>3) + PIXI.WebGLGraphics.buildPoly(data, graphics._webGL); } - + if(data.lineWidth > 0) { PIXI.WebGLGraphics.buildLine(data, graphics._webGL); } } - else if(data.type == PIXI.Graphics.RECT) + else if(data.type === PIXI.Graphics.RECT) { PIXI.WebGLGraphics.buildRectangle(data, graphics._webGL); } - else if(data.type == PIXI.Graphics.CIRC || data.type == PIXI.Graphics.ELIP) + else if(data.type === PIXI.Graphics.CIRC || data.type === PIXI.Graphics.ELIP); { PIXI.WebGLGraphics.buildCircle(data, graphics._webGL); } - }; - + } + graphics._webGL.lastIndex = graphics.graphicsData.length; - + var gl = PIXI.gl; graphics._webGL.glPoints = new Float32Array(graphics._webGL.points); - + gl.bindBuffer(gl.ARRAY_BUFFER, graphics._webGL.buffer); gl.bufferData(gl.ARRAY_BUFFER, graphics._webGL.glPoints, gl.STATIC_DRAW); - + graphics._webGL.glIndicies = new Uint16Array(graphics._webGL.indices); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, graphics._webGL.glIndicies, gl.STATIC_DRAW); -} +}; /** * Builds a rectangle to draw @@ -145,45 +144,45 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - - + + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; - + var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vertPos = verts.length/6; - + // start verts.push(x, y); verts.push(r, g, b, alpha); - + verts.push(x + width, y); verts.push(r, g, b, alpha); - + verts.push(x , y + height); verts.push(r, g, b, alpha); - + verts.push(x + width, y + height); verts.push(r, g, b, alpha); - + // insert 2 dead triangles.. - indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3) + indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3); } - + if(graphicsData.lineWidth) { graphicsData.points = [x, y, @@ -191,11 +190,10 @@ x + width, y + height, x, y + height, x, y]; - + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a circle to draw @@ -210,60 +208,61 @@ { // --- // // need to convert points to a nice regular data - // + // var rectData = graphicsData.points; var x = rectData[0]; var y = rectData[1]; var width = rectData[2]; var height = rectData[3]; - + var totalSegs = 40; var seg = (Math.PI * 2) / totalSegs ; - + + var i = 0; + if(graphicsData.fill) { - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var verts = webGLData.points; var indices = webGLData.indices; - + var vecPos = verts.length/6; - + indices.push(vecPos); - - for (var i=0; i < totalSegs + 1 ; i++) + + for (i = 0; i < totalSegs + 1 ; i++) { verts.push(x,y, r, g, b, alpha); - + verts.push(x + Math.sin(seg * i) * width, y + Math.cos(seg * i) * height, r, g, b, alpha); - + indices.push(vecPos++, vecPos++); - }; - + } + indices.push(vecPos-1); } - + if(graphicsData.lineWidth) { graphicsData.points = []; - - for (var i=0; i < totalSegs + 1; i++) + + for (i = 0; i < totalSegs + 1; i++) { graphicsData.points.push(x + Math.sin(seg * i) * width, - y + Math.cos(seg * i) * height) - }; - + y + Math.cos(seg * i) * height); + } + PIXI.WebGLGraphics.buildLine(graphicsData, webGLData); } - -} +}; /** * Builds a line to draw @@ -277,97 +276,96 @@ PIXI.WebGLGraphics.buildLine = function(graphicsData, webGLData) { // TODO OPTIMISE! - - var wrap = true; + var i = 0; + var points = graphicsData.points; - if(points.length == 0)return; - + if(points.length === 0)return; + // if the line width is an odd number add 0.5 to align to a whole pixel if(graphicsData.lineWidth%2) { - for (var i = 0; i < points.length; i++) { + for (i = 0; i < points.length; i++) { points[i] += 0.5; - }; + } } // get first and last point.. figure out the middle! var firstPoint = new PIXI.Point( points[0], points[1] ); var lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + // if the first point is the last point - goona have issues :) - if(firstPoint.x == lastPoint.x && firstPoint.y == lastPoint.y) + if(firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) { points.pop(); points.pop(); - + lastPoint = new PIXI.Point( points[points.length - 2], points[points.length - 1] ); - + var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5; var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5; - + points.unshift(midPointX, midPointY); - points.push(midPointX, midPointY) + points.push(midPointX, midPointY); } - + var verts = webGLData.points; var indices = webGLData.indices; var length = points.length / 2; var indexCount = points.length; var indexStart = verts.length/6; - + // DRAW the Line var width = graphicsData.lineWidth / 2; - + // sort color - var color = HEXtoRGB(graphicsData.lineColor); + var color = PIXI.hex2rgb(graphicsData.lineColor); var alpha = graphicsData.lineAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - - var p1x, p1y, p2x, p2y, p3x, p3y; + + var px, py, p1x, p1y, p2x, p2y, p3x, p3y; var perpx, perpy, perp2x, perp2y, perp3x, perp3y; - var ipx, ipy; var a1, b1, c1, a2, b2, c2; var denom, pdist, dist; - + p1x = points[0]; p1y = points[1]; - + p2x = points[2]; p2y = points[3]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); - + perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - + // start verts.push(p1x - perpx , p1y - perpy, r, g, b, alpha); - + verts.push(p1x + perpx , p1y + perpy, r, g, b, alpha); - - for (var i = 1; i < length-1; i++) + + for (i = 1; i < length-1; i++) { p1x = points[(i-1)*2]; p1y = points[(i-1)*2 + 1]; - - p2x = points[(i)*2] - p2y = points[(i)*2 + 1] - + + p2x = points[(i)*2]; + p2y = points[(i)*2 + 1]; + p3x = points[(i+1)*2]; p3y = points[(i+1)*2 + 1]; - + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; @@ -376,62 +374,62 @@ perp2x = -(p2y - p3y); perp2y = p2x - p3x; - + dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y); perp2x /= dist; perp2y /= dist; perp2x *= width; perp2y *= width; - + a1 = (-perpy + p1y) - (-perpy + p2y); b1 = (-perpx + p2x) - (-perpx + p1x); c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y); a2 = (-perp2y + p3y) - (-perp2y + p2y); b2 = (-perp2x + p2x) - (-perp2x + p3x); c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y); - + denom = a1*b2 - a2*b1; - if(Math.abs(denom) < 0.1 ) + if(Math.abs(denom) < 0.1 ) { - + denom+=10.1; verts.push(p2x - perpx , p2y - perpy, r, g, b, alpha); - + verts.push(p2x + perpx , p2y + perpy, r, g, b, alpha); - + continue; } - + px = (b1*c2 - b2*c1)/denom; py = (a2*c1 - a1*c2)/denom; - - + + pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y); - + if(pdist > 140 * 140) { perp3x = perpx - perp2x; perp3y = perpy - perp2y; - + dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y); perp3x /= dist; perp3y /= dist; perp3x *= width; perp3y *= width; - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x + perp3x, p2y +perp3y); verts.push(r, g, b, alpha); - + verts.push(p2x - perp3x, p2y -perp3y); verts.push(r, g, b, alpha); - + indexCount++; } else @@ -439,42 +437,42 @@ verts.push(px , py); verts.push(r, g, b, alpha); - + verts.push(p2x - (px-p2x), p2y - (py - p2y)); verts.push(r, g, b, alpha); } } - - p1x = points[(length-2)*2] - p1y = points[(length-2)*2 + 1] - - p2x = points[(length-1)*2] - p2y = points[(length-1)*2 + 1] - - perpx = -(p1y - p2y) + + p1x = points[(length-2)*2]; + p1y = points[(length-2)*2 + 1]; + + p2x = points[(length-1)*2]; + p2y = points[(length-1)*2 + 1]; + + perpx = -(p1y - p2y); perpy = p1x - p2x; - + dist = Math.sqrt(perpx*perpx + perpy*perpy); perpx /= dist; perpy /= dist; perpx *= width; perpy *= width; - - verts.push(p2x - perpx , p2y - perpy) + + verts.push(p2x - perpx , p2y - perpy); verts.push(r, g, b, alpha); - - verts.push(p2x + perpx , p2y + perpy) + + verts.push(p2x + perpx , p2y + perpy); verts.push(r, g, b, alpha); - + indices.push(indexStart); - - for (var i=0; i < indexCount; i++) + + for (i = 0; i < indexCount; i++) { indices.push(indexStart++); - }; - + } + indices.push(indexStart-1); -} +}; /** * Builds a polygon to draw @@ -489,44 +487,38 @@ { var points = graphicsData.points; if(points.length < 6)return; - + // get first and last point.. figure out the middle! var verts = webGLData.points; var indices = webGLData.indices; - + var length = points.length / 2; - + // sort color - var color = HEXtoRGB(graphicsData.fillColor); + var color = PIXI.hex2rgb(graphicsData.fillColor); var alpha = graphicsData.fillAlpha; var r = color[0] * alpha; var g = color[1] * alpha; var b = color[2] * alpha; - + var triangles = PIXI.PolyK.Triangulate(points); - + var vertPos = verts.length / 6; - - for (var i=0; i < triangles.length; i+=3) + + var i = 0; + + for (i = 0; i < triangles.length; i+=3) { indices.push(triangles[i] + vertPos); indices.push(triangles[i] + vertPos); indices.push(triangles[i+1] + vertPos); indices.push(triangles[i+2] +vertPos); indices.push(triangles[i+2] + vertPos); - }; - - for (var i = 0; i < length; i++) + } + + for (i = 0; i < length; i++) { verts.push(points[i * 2], points[i * 2 + 1], r, g, b, alpha); - }; -} - -function HEXtoRGB(hex) { - return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} - - - - + } +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderGroup.js b/src/pixi/renderers/webgl/WebGLRenderGroup.js index 990d9be..47d8b96 100644 --- a/src/pixi/renderers/webgl/WebGLRenderGroup.js +++ b/src/pixi/renderers/webgl/WebGLRenderGroup.js @@ -18,16 +18,16 @@ PIXI.WebGLRenderGroup = function(gl, transparent) { this.gl = gl; - this.root; - - this.backgroundColor; - this.transparent = transparent == undefined ? true : transparent; - + this.root = null; + + this.backgroundColor = undefined; + this.transparent = transparent === undefined ? true : transparent; + this.batchs = []; this.toRemove = []; - console.log(this.transparent) + //console.log(this.transparent); this.filterManager = new PIXI.WebGLFilterManager(this.transparent); -} +}; // constructor PIXI.WebGLRenderGroup.prototype.constructor = PIXI.WebGLRenderGroup; @@ -37,22 +37,22 @@ * * @method setRenderable * @param displayObject {DisplayObject} - * @private + * @private */ PIXI.WebGLRenderGroup.prototype.setRenderable = function(displayObject) { // has this changed?? if(this.root)this.removeDisplayObjectAndChildren(this.root); - + displayObject.worldVisible = displayObject.visible; - + // soooooo // // to check if any batchs exist already?? - + // TODO what if its already has an object? should remove it this.root = displayObject; this.addDisplayObjectAndChildren(displayObject); -} +}; /** * Renders the stage to its webgl view @@ -63,32 +63,31 @@ PIXI.WebGLRenderGroup.prototype.render = function(projection, buffer) { PIXI.WebGLRenderer.updateTextures(); - + var gl = this.gl; gl.uniform2f(PIXI.defaultShader.projectionVector, projection.x, projection.y); this.filterManager.begin(projection, buffer); - + gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); // will render all the elements in the group var renderable; - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - + renderable = this.batchs[i]; if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); continue; } - + // render special this.renderSpecial(renderable, projection); } - -} +}; /** * Renders a specific displayObject @@ -109,13 +108,16 @@ // to do! // render part of the scene... - + var startIndex; var startBatchIndex; - + var endIndex; var endBatchIndex; - + var endBatch; + + var head; + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -130,25 +132,24 @@ } var startBatch = nextRenderable.batch; //console.log(nextRenderable); - + //console.log(renderable) if(nextRenderable instanceof PIXI.Sprite) { startBatch = nextRenderable.batch; - - var head = startBatch.head; - var next = head; - + + head = startBatch.head; + // ok now we have the batch.. need to find the start index! - if(head == nextRenderable) + if(head === nextRenderable) { startIndex = 0; } else { startIndex = 1; - - while(head.__next != nextRenderable) + + while(head.__next !== nextRenderable) { startIndex++; head = head.__next; @@ -159,7 +160,7 @@ { startBatch = nextRenderable; } - + // Get the LAST renderable object var lastRenderable = displayObject.last; while(lastRenderable._iPrev) @@ -167,22 +168,22 @@ if(lastRenderable.renderable && lastRenderable.__renderGroup)break; lastRenderable = lastRenderable._iNext; } - + if(lastRenderable instanceof PIXI.Sprite) { endBatch = lastRenderable.batch; - - var head = endBatch.head; - - if(head == lastRenderable) + + head = endBatch.head; + + if(head === lastRenderable) { endIndex = 0; } else { endIndex = 1; - - while(head.__next != lastRenderable) + + while(head.__next !== lastRenderable) { endIndex++; head = head.__next; @@ -193,11 +194,11 @@ { endBatch = lastRenderable; } - + //console.log(endBatch); // TODO - need to fold this up a bit! - - if(startBatch == endBatch) + + if(startBatch === endBatch) { if(startBatch instanceof PIXI.WebGLBatch) { @@ -209,11 +210,11 @@ } return; } - + // now we have first and last! startBatchIndex = this.batchs.indexOf(startBatch); endBatchIndex = this.batchs.indexOf(endBatch); - + // DO the first batch if(startBatch instanceof PIXI.WebGLBatch) { @@ -223,12 +224,13 @@ { this.renderSpecial(startBatch, projection); } - + // DO the middle batchs.. - for (var i=startBatchIndex+1; i < endBatchIndex; i++) + var renderable; + for (var i = startBatchIndex+1; i < endBatchIndex; i++) { renderable = this.batchs[i]; - + if(renderable instanceof PIXI.WebGLBatch) { this.batchs[i].render(); @@ -238,7 +240,7 @@ this.renderSpecial(renderable, projection); } } - + // DO the last batch.. if(endBatch instanceof PIXI.WebGLBatch) { @@ -248,7 +250,7 @@ { this.renderSpecial(endBatch, projection); } -} +}; /** * Renders a specific renderable @@ -260,8 +262,8 @@ */ PIXI.WebGLRenderGroup.prototype.renderSpecial = function(renderable, projection) { - - var worldVisible = renderable.vcount === PIXI.visibleCount + + var worldVisible = renderable.vcount === PIXI.visibleCount; if(renderable instanceof PIXI.TilingSprite) @@ -284,9 +286,8 @@ { this.handleFilterBlock(renderable, projection); } -} +}; -flip = false; var maskStack = []; var maskPosition = 0; @@ -298,30 +299,30 @@ * for now only masks are supported.. */ var gl = PIXI.gl; - + if(filterBlock.open) { if(filterBlock.data instanceof Array) { this.filterManager.pushFilter(filterBlock); // ok so.. - + } else - { + { maskPosition++; - maskStack.push(filterBlock) - + maskStack.push(filterBlock); + gl.enable(gl.STENCIL_TEST); - + gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.INCR); - + PIXI.WebGLGraphics.renderGraphics(filterBlock.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); @@ -335,27 +336,26 @@ } else { - var maskData = maskStack.pop(filterBlock) - + var maskData = maskStack.pop(filterBlock); if(maskData) { gl.colorMask(false, false, false, false); - + gl.stencilFunc(gl.ALWAYS,1,1); gl.stencilOp(gl.KEEP,gl.KEEP,gl.DECR); PIXI.WebGLGraphics.renderGraphics(maskData.data, projection); - + gl.colorMask(true, true, true, true); gl.stencilFunc(gl.NOTEQUAL,0,maskStack.length); gl.stencilOp(gl.KEEP,gl.KEEP,gl.KEEP); - }; + } gl.disable(gl.STENCIL_TEST); } } -} +}; /** * Updates a webgl texture @@ -366,23 +366,23 @@ */ PIXI.WebGLRenderGroup.prototype.updateTexture = function(displayObject) { - + // TODO definitely can optimse this function.. - + this.removeObject(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ var previousRenderable = displayObject.first; - while(previousRenderable != this.root) + while(previousRenderable !== this.root) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -395,9 +395,9 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - + this.insertObject(displayObject, previousRenderable, nextRenderable); -} +}; /** * Adds filter blocks @@ -417,13 +417,13 @@ * It keeps going back until it finds a sprite or the stage */ var previousRenderable = start; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } this.insertAfter(start, previousRenderable); - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -431,13 +431,13 @@ * scene graph */ var previousRenderable2 = end; - while(previousRenderable2 != this.root.first) + while(previousRenderable2 !== this.root.first) { previousRenderable2 = previousRenderable2._iPrev; if(previousRenderable2.renderable && previousRenderable2.__renderGroup)break; } this.insertAfter(end, previousRenderable2); -} +}; /** * Remove filter blocks @@ -451,7 +451,7 @@ { this.removeObject(start); this.removeObject(end); -} +}; /** * Adds a display object and children to the webgl context @@ -463,20 +463,20 @@ PIXI.WebGLRenderGroup.prototype.addDisplayObjectAndChildren = function(displayObject) { if(displayObject.__renderGroup)displayObject.__renderGroup.removeDisplayObjectAndChildren(displayObject); - + /* * LOOK FOR THE PREVIOUS RENDERABLE * This part looks for the closest previous sprite that can go into a batch * It keeps going back until it finds a sprite or the stage */ - + var previousRenderable = displayObject.first; - while(previousRenderable != this.root.first) + while(previousRenderable !== this.root.first) { previousRenderable = previousRenderable._iPrev; if(previousRenderable.renderable && previousRenderable.__renderGroup)break; } - + /* * LOOK FOR THE NEXT SPRITE * This part looks for the closest next sprite that can go into a batch @@ -489,26 +489,27 @@ nextRenderable = nextRenderable._iNext; if(nextRenderable.renderable && nextRenderable.__renderGroup)break; } - - // one the display object hits this. we can break the loop - + + // one the display object hits this. we can break the loop + var tempObject = displayObject.first; var testObject = displayObject.last._iNext; - do + + do { tempObject.__renderGroup = this; - + if(tempObject.renderable) { - + this.insertObject(tempObject, previousRenderable, nextRenderable); previousRenderable = tempObject; } - + tempObject = tempObject._iNext; } - while(tempObject != testObject) -} + while(tempObject !== testObject); +}; /** * Removes a display object and children to the webgl context @@ -519,18 +520,16 @@ */ PIXI.WebGLRenderGroup.prototype.removeDisplayObjectAndChildren = function(displayObject) { - if(displayObject.__renderGroup != this)return; - -// var displayObject = displayObject.first; - var lastObject = displayObject.last; - do + if(displayObject.__renderGroup !== this) return; + + do { displayObject.__renderGroup = null; if(displayObject.renderable)this.removeObject(displayObject); displayObject = displayObject._iNext; } - while(displayObject) -} + while(displayObject); +}; /** * Inserts a displayObject into the linked list @@ -546,22 +545,23 @@ // while looping below THE OBJECT MAY NOT HAVE BEEN ADDED var previousSprite = previousObject; var nextSprite = nextObject; - + var index, batch; + /* * so now we have the next renderable and the previous renderable - * + * */ if(displayObject instanceof PIXI.Sprite) { - var previousBatch - var nextBatch - + var previousBatch; + var nextBatch; + if(previousSprite instanceof PIXI.Sprite) { previousBatch = previousSprite.batch; if(previousBatch) { - if(previousBatch.texture == displayObject.texture.baseTexture && previousBatch.blendMode == displayObject.blendMode) + if(previousBatch.texture === displayObject.texture.baseTexture && previousBatch.blendMode === displayObject.blendMode) { previousBatch.insertAfter(displayObject, previousSprite); return; @@ -573,40 +573,40 @@ // TODO reword! previousBatch = previousSprite; } - + if(nextSprite) { if(nextSprite instanceof PIXI.Sprite) { nextBatch = nextSprite.batch; - + //batch may not exist if item was added to the display list but not to the webGL if(nextBatch) { - if(nextBatch.texture == displayObject.texture.baseTexture && nextBatch.blendMode == displayObject.blendMode) + if(nextBatch.texture === displayObject.texture.baseTexture && nextBatch.blendMode === displayObject.blendMode) { nextBatch.insertBefore(displayObject, nextSprite); return; } else { - if(nextBatch == previousBatch) + if(nextBatch === previousBatch) { // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(nextSprite); // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var batch = PIXI.WebGLRenderer.getBatch(); + batch = PIXI.WebGLRenderer.getBatch(); - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); batch.init(displayObject); this.batchs.splice(index+1, 0, batch, splitBatch); - + return; } } @@ -615,39 +615,39 @@ else { // TODO re-word! - + nextBatch = nextSprite; } } - + /* * looks like it does not belong to any batch! * but is also not intersecting one.. * time to create anew one! */ - - var batch = PIXI.WebGLRenderer.getBatch(); + + batch = PIXI.WebGLRenderer.getBatch(); batch.init(displayObject); - if(previousBatch) // if this is invalid it means + if(previousBatch) // if this is invalid it means { - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, batch); } else { this.batchs.push(batch); } - + return; } else if(displayObject instanceof PIXI.TilingSprite) { - + // add to a batch!! this.initTilingSprite(displayObject); // this.batchs.push(displayObject); - + } else if(displayObject instanceof PIXI.Strip) { @@ -655,20 +655,21 @@ this.initStrip(displayObject); // this.batchs.push(displayObject); } + /* else if(displayObject)// instanceof PIXI.Graphics) { //displayObject.initWebGL(this); - + // add to a batch!! //this.initStrip(displayObject); //this.batchs.push(displayObject); } - - this.insertAfter(displayObject, previousSprite); - - // insert and SPLIT! + */ -} + this.insertAfter(displayObject, previousSprite); + + // insert and SPLIT! +}; /** * Inserts a displayObject into the linked list @@ -680,36 +681,38 @@ */ PIXI.WebGLRenderGroup.prototype.insertAfter = function(item, displayObject) { + var index; + if(displayObject instanceof PIXI.Sprite) { var previousBatch = displayObject.batch; - + if(previousBatch) { // so this object is in a batch! - + // is it not? need to split the batch - if(previousBatch.tail == displayObject) + if(previousBatch.tail === displayObject) { - // is it tail? insert in to batchs - var index = this.batchs.indexOf( previousBatch ); + // is it tail? insert in to batchs + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item); } else { // TODO MODIFY ADD / REMOVE CHILD TO ACCOUNT FOR FILTERS (also get prev and next) // - + // THERE IS A SPLIT IN THIS BATCH! // var splitBatch = previousBatch.split(displayObject.__next); - + // COOL! - // add it back into the array + // add it back into the array /* * OOPS! * seems the new sprite is in the middle of a batch - * lets split it.. + * lets split it.. */ - var index = this.batchs.indexOf( previousBatch ); + index = this.batchs.indexOf( previousBatch ); this.batchs.splice(index+1, 0, item, splitBatch); } } @@ -720,10 +723,10 @@ } else { - var index = this.batchs.indexOf( displayObject ); + index = this.batchs.indexOf( displayObject ); this.batchs.splice(index+1, 0, item); } -} +}; /** * Removes a displayObject from the linked list @@ -736,26 +739,26 @@ { // loop through children.. // display object // - + // add a child from the render group.. // remove it and all its children! //displayObject.cacheVisible = false;//displayObject.visible; /* * removing is a lot quicker.. - * + * */ var batchToRemove; - + if(displayObject instanceof PIXI.Sprite) { // should always have a batch! var batch = displayObject.batch; if(!batch)return; // this means the display list has been altered befre rendering - + batch.remove(displayObject); - - if(batch.size==0) + + if(batch.size === 0) { batchToRemove = batch; } @@ -764,44 +767,44 @@ { batchToRemove = displayObject; } - + /* * Looks like there is somthing that needs removing! */ - if(batchToRemove) + if(batchToRemove) { var index = this.batchs.indexOf( batchToRemove ); - if(index == -1)return;// this means it was added then removed before rendered - + if(index === -1)return;// this means it was added then removed before rendered + // ok so.. check to see if you adjacent batchs should be joined. // TODO may optimise? - if(index == 0 || index == this.batchs.length-1) + if(index === 0 || index === this.batchs.length-1) { // wha - eva! just get of the empty batch! this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); - + return; } - + if(this.batchs[index-1] instanceof PIXI.WebGLBatch && this.batchs[index+1] instanceof PIXI.WebGLBatch) { - if(this.batchs[index-1].texture == this.batchs[index+1].texture && this.batchs[index-1].blendMode == this.batchs[index+1].blendMode) + if(this.batchs[index-1].texture === this.batchs[index+1].texture && this.batchs[index-1].blendMode === this.batchs[index+1].blendMode) { //console.log("MERGE") this.batchs[index-1].merge(this.batchs[index+1]); - + if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); PIXI.WebGLRenderer.returnBatch(this.batchs[index+1]); this.batchs.splice(index, 2); return; } } - + this.batchs.splice(index, 1); if(batchToRemove instanceof PIXI.WebGLBatch)PIXI.WebGLRenderer.returnBatch(batchToRemove); } -} +}; /** @@ -816,26 +819,26 @@ var gl = this.gl; // make the texture tilable.. - + sprite.verticies = new Float32Array([0, 0, sprite.width, 0, sprite.width, sprite.height, 0, sprite.height]); - + sprite.uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]); - + sprite.colors = new Float32Array([1,1,1,1]); - - sprite.indices = new Uint16Array([0, 1, 3,2])//, 2]); - + + sprite.indices = new Uint16Array([0, 1, 3,2]); //, 2]); + sprite._vertexBuffer = gl.createBuffer(); sprite._indexBuffer = gl.createBuffer(); sprite._uvBuffer = gl.createBuffer(); sprite._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, sprite.verticies, gl.STATIC_DRAW); @@ -847,7 +850,7 @@ gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sprite._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, sprite.indices, gl.STATIC_DRAW); - + // return ( (x > 0) && ((x & (x - 1)) == 0) ); if(sprite.texture.baseTexture._glTexture) @@ -861,7 +864,7 @@ { sprite.texture.baseTexture._powerOf2 = true; } -} +}; /** * Renders a Strip @@ -879,18 +882,16 @@ var shader = PIXI.stripShader; - var program = shader.program; - var m = PIXI.mat3.clone(strip.worldTransform); - + PIXI.mat3.transpose(m); - + // console.log(projection) - // set the matrix transform for the + // set the matrix transform for the gl.uniformMatrix3fv(shader.translationMatrix, false, m); gl.uniform2f(shader.projectionVector, projection.x, projection.y); gl.uniform2f(shader.offsetVector, -PIXI.offset.x, -PIXI.offset.y); - + gl.uniform1f(shader.alpha, strip.worldAlpha); /* @@ -903,24 +904,24 @@ gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_COLOR); } */ - + //console.log("!!") if(!strip.dirty) - { + { gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies) + gl.bufferSubData(gl.ARRAY_BUFFER, 0, strip.verticies); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); } @@ -928,32 +929,32 @@ { strip.dirty = false; gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aVertexPosition, 2, gl.FLOAT, false, 0, 0); - + // update the uvs gl.bindBuffer(gl.ARRAY_BUFFER, strip._uvBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.uvs, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.aTextureCoord, 2, gl.FLOAT, false, 0, 0); - + gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, strip.texture.baseTexture._glTexture); // console.log(strip.texture.baseTexture._glTexture) gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); - gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW) + gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); gl.vertexAttribPointer(shader.colorAttribute, 1, gl.FLOAT, false, 0, 0); - + // dont need to upload! gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); - + } - + gl.drawElements(gl.TRIANGLE_STRIP, strip.indices.length, gl.UNSIGNED_SHORT, 0); - + PIXI.deactivateStripShader(); //gl.useProgram(PIXI.currentProgram); -} +}; /** * Renders a TilingSprite @@ -967,35 +968,32 @@ { var gl = this.gl; - - var shaderProgram = PIXI.shaderProgram; - var tilePosition = sprite.tilePosition; var tileScale = sprite.tileScale; - + var offsetX = tilePosition.x/sprite.texture.baseTexture.width; var offsetY = tilePosition.y/sprite.texture.baseTexture.height; - + var scaleX = (sprite.width / sprite.texture.baseTexture.width) / tileScale.x; var scaleY = (sprite.height / sprite.texture.baseTexture.height) / tileScale.y; sprite.uvs[0] = 0 - offsetX; sprite.uvs[1] = 0 - offsetY; - + sprite.uvs[2] = (1 * scaleX) -offsetX; sprite.uvs[3] = 0 - offsetY; - + sprite.uvs[4] = (1 *scaleX) - offsetX; sprite.uvs[5] = (1 *scaleY) - offsetY; - + sprite.uvs[6] = 0 - offsetX; sprite.uvs[7] = (1 *scaleY) - offsetY; - + gl.bindBuffer(gl.ARRAY_BUFFER, sprite._uvBuffer); - gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs) - + gl.bufferSubData(gl.ARRAY_BUFFER, 0, sprite.uvs); + this.renderStrip(sprite, projectionMatrix); -} +}; /** * Initializes a strip to be rendered @@ -1008,13 +1006,12 @@ { // build the strip! var gl = this.gl; - var shaderProgram = this.shaderProgram; - + strip._vertexBuffer = gl.createBuffer(); strip._indexBuffer = gl.createBuffer(); strip._uvBuffer = gl.createBuffer(); strip._colorBuffer = gl.createBuffer(); - + gl.bindBuffer(gl.ARRAY_BUFFER, strip._vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.verticies, gl.DYNAMIC_DRAW); @@ -1024,8 +1021,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, strip._colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, strip.colors, gl.STATIC_DRAW); - + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, strip._indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, strip.indices, gl.STATIC_DRAW); -} - +}; diff --git a/src/pixi/renderers/webgl/WebGLRenderer.js b/src/pixi/renderers/webgl/WebGLRenderer.js index 9b5e703..1acec35 100644 --- a/src/pixi/renderers/webgl/WebGLRenderer.js +++ b/src/pixi/renderers/webgl/WebGLRenderer.js @@ -6,7 +6,7 @@ // an instance of the gl context.. // only one at the moment :/ -PIXI.gl; +PIXI.gl = null; /** * the WebGLRenderer is draws the stage and all its content onto a webGL enabled canvas. This renderer @@ -21,7 +21,7 @@ * @param view {Canvas} the canvas to use as a view, optional * @param transparent=false {Boolean} the transparency of the render view, default false * @param antialias=false {Boolean} sets antialias (only applicable in chrome at the moment) - * + * */ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias) { @@ -32,14 +32,14 @@ this.width = width || 800; this.height = height || 600; - this.view = view || document.createElement( 'canvas' ); + this.view = view || document.createElement( 'canvas' ); this.view.width = this.width; this.view.height = this.height; - // deal with losing context.. + // deal with losing context.. var scope = this; - this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false) - this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false) + this.view.addEventListener('webglcontextlost', function(event) { scope.handleContextLost(event); }, false); + this.view.addEventListener('webglcontextrestored', function(event) { scope.handleContextRestored(event); }, false); this.batchs = []; @@ -48,30 +48,30 @@ antialias:!!antialias, // SPEED UP?? premultipliedAlpha:false, stencil:true - } + }; //try 'experimental-webgl' try { - PIXI.gl = this.gl = this.view.getContext("experimental-webgl", options); + PIXI.gl = this.gl = this.view.getContext('experimental-webgl', options); } catch (e) { //try 'webgl' try { - PIXI.gl = this.gl = this.view.getContext("webgl", options); - } catch (e) { + PIXI.gl = this.gl = this.view.getContext('webgl', options); + } catch (e2) { // fail, not able to get a context - throw new Error(" This browser does not support webGL. Try using the canvas renderer" + this); + throw new Error(' This browser does not support webGL. Try using the canvas renderer' + this); } } PIXI.initDefaultShaders(); - - + + // PIXI.activateDefaultShader(); var gl = this.gl; - + gl.useProgram(PIXI.defaultShader.program); @@ -82,7 +82,7 @@ gl.disable(gl.CULL_FACE); gl.enable(gl.BLEND); - gl.colorMask(true, true, true, this.transparent); + gl.colorMask(true, true, true, this.transparent); PIXI.projection = new PIXI.Point(400, 300); PIXI.offset = new PIXI.Point(0, 0); @@ -96,7 +96,7 @@ this.stageRenderGroup = new PIXI.WebGLRenderGroup(this.gl, this.transparent); // this.stageRenderGroup. = this.transparent -} +}; // constructor PIXI.WebGLRenderer.prototype.constructor = PIXI.WebGLRenderer; @@ -107,11 +107,11 @@ * @static * @method getBatch * @return {WebGLBatch} - * @private + * @private */ PIXI.WebGLRenderer.getBatch = function() { - if(PIXI._batchs.length == 0) + if(PIXI._batchs.length === 0) { return new PIXI.WebGLBatch(PIXI.WebGLRenderer.gl); } @@ -119,7 +119,7 @@ { return PIXI._batchs.pop(); } -} +}; /** * Puts a batch back into the pool @@ -131,9 +131,9 @@ */ PIXI.WebGLRenderer.returnBatch = function(batch) { - batch.clean(); + batch.clean(); PIXI._batchs.push(batch); -} +}; /** * Renders the stage to its webGL view @@ -144,8 +144,8 @@ PIXI.WebGLRenderer.prototype.render = function(stage) { if(this.contextLost)return; - - + + // if rendering a new stage clear the batchs.. if(this.__stage !== stage) { @@ -155,33 +155,33 @@ this.stageRenderGroup.setRenderable(stage); } - // update any textures + // update any textures PIXI.WebGLRenderer.updateTextures(); - - // update the scene graph + + // update the scene graph PIXI.visibleCount++; stage.updateTransform(); - + var gl = this.gl; - + // -- Does this need to be set every frame? -- // - gl.colorMask(true, true, true, this.transparent); - gl.viewport(0, 0, this.width, this.height); - + gl.colorMask(true, true, true, this.transparent); + gl.viewport(0, 0, this.width, this.height); + gl.bindFramebuffer(gl.FRAMEBUFFER, null); - - gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); + + gl.clearColor(stage.backgroundColorSplit[0],stage.backgroundColorSplit[1],stage.backgroundColorSplit[2], !this.transparent); gl.clear(gl.COLOR_BUFFER_BIT); // HACK TO TEST - + this.stageRenderGroup.backgroundColor = stage.backgroundColorSplit; - + PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + this.stageRenderGroup.render(PIXI.projection); - + // interaction // run interaction! if(stage.interactive) @@ -193,18 +193,18 @@ stage.interactionManager.setTarget(this); } } - + // after rendering lets confirm all frames that have been uodated.. if(PIXI.Texture.frameUpdates.length > 0) { - for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) + for (var i=0; i < PIXI.Texture.frameUpdates.length; i++) { PIXI.Texture.frameUpdates[i].updateFrame = false; - }; - + } + PIXI.Texture.frameUpdates = []; } -} +}; /** * Updates the textures loaded into this webgl renderer @@ -215,12 +215,18 @@ */ PIXI.WebGLRenderer.updateTextures = function() { + var i = 0; + //TODO break this out into a texture manager... - for (var i=0; i < PIXI.texturesToUpdate.length; i++) PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); - for (var i=0; i < PIXI.texturesToDestroy.length; i++) PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + for (i = 0; i < PIXI.texturesToUpdate.length; i++) + PIXI.WebGLRenderer.updateTexture(PIXI.texturesToUpdate[i]); + + for (i = 0; i < PIXI.texturesToDestroy.length; i++) + PIXI.WebGLRenderer.destroyTexture(PIXI.texturesToDestroy[i]); + PIXI.texturesToUpdate = []; PIXI.texturesToDestroy = []; -} +}; /** * Updates a loaded webgl texture @@ -234,7 +240,7 @@ { //TODO break this out into a texture manager... var gl = PIXI.gl; - + if(!texture._glTexture) { texture._glTexture = gl.createTexture(); @@ -264,7 +270,7 @@ gl.bindTexture(gl.TEXTURE_2D, null); } -} +}; /** * Destroys a loaded webgl texture @@ -283,7 +289,7 @@ texture._glTexture = gl.createTexture(); gl.deleteTexture(gl.TEXTURE_2D, texture._glTexture); } -} +}; /** * resizes the webGL view to the specified width and height @@ -300,13 +306,13 @@ this.view.width = width; this.view.height = height; - this.gl.viewport(0, 0, this.width, this.height); + this.gl.viewport(0, 0, this.width, this.height); //var projectionMatrix = this.projectionMatrix; PIXI.projection.x = this.width/2; PIXI.projection.y = -this.height/2; - + //PIXI.size.x = this.width/2; //PIXI.size.y = -this.height/2; @@ -314,7 +320,7 @@ // projectionMatrix[5] = -2/this.height; // projectionMatrix[12] = -1; // projectionMatrix[13] = 1; -} +}; /** * Handles a lost webgl context @@ -327,7 +333,7 @@ { event.preventDefault(); this.contextLost = true; -} +}; /** * Handles a restored webgl context @@ -336,28 +342,28 @@ * @param event {Event} * @private */ -PIXI.WebGLRenderer.prototype.handleContextRestored = function(event) +PIXI.WebGLRenderer.prototype.handleContextRestored = function() { - this.gl = this.view.getContext("experimental-webgl", { + this.gl = this.view.getContext('experimental-webgl', { alpha: true }); - this.initShaders(); + this.initShaders(); - for(var key in PIXI.TextureCache) + for(var key in PIXI.TextureCache) { - var texture = PIXI.TextureCache[key].baseTexture; - texture._glTexture = null; - PIXI.WebGLRenderer.updateTexture(texture); - }; + var texture = PIXI.TextureCache[key].baseTexture; + texture._glTexture = null; + PIXI.WebGLRenderer.updateTexture(texture); + } - for (var i=0; i < this.batchs.length; i++) + for (var i=0; i < this.batchs.length; i++) { - this.batchs[i].restoreLostContext(this.gl)// + this.batchs[i].restoreLostContext(this.gl); this.batchs[i].dirty = true; - }; + } PIXI._restoreBatchs(this.gl); this.contextLost = false; -} +}; diff --git a/src/pixi/renderers/webgl/WebGLShaders.js b/src/pixi/renderers/webgl/WebGLShaders.js index 016d37c..b6b66b7 100644 --- a/src/pixi/renderers/webgl/WebGLShaders.js +++ b/src/pixi/renderers/webgl/WebGLShaders.js @@ -2,8 +2,7 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ - -PIXI.initDefaultShaders = function() +PIXI.initDefaultShaders = function() { PIXI.primitiveShader = new PIXI.PrimitiveShader(); PIXI.primitiveShader.init(); @@ -14,53 +13,51 @@ PIXI.defaultShader = new PIXI.PixiShader(); PIXI.defaultShader.init(); - var gl = PIXI.gl; + var gl = PIXI.gl; var shaderProgram = PIXI.defaultShader.program; - gl.useProgram(shaderProgram); - + gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.activatePrimitiveShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.primitiveShader.program); - + gl.disableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); gl.enableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.primitiveShader.colorAttribute); -} +}; PIXI.deactivatePrimitiveShader = function() { var gl = PIXI.gl; gl.useProgram(PIXI.defaultShader.program); - + gl.disableVertexAttribArray(PIXI.primitiveShader.aVertexPosition); gl.disableVertexAttribArray(PIXI.primitiveShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aVertexPosition); gl.enableVertexAttribArray(PIXI.defaultShader.colorAttribute); gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); - -} +}; PIXI.activateStripShader = function() { var gl = PIXI.gl; - + gl.useProgram(PIXI.stripShader.program); // gl.disableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; PIXI.deactivateStripShader = function() { @@ -68,7 +65,7 @@ gl.useProgram(PIXI.defaultShader.program); //gl.enableVertexAttribArray(PIXI.defaultShader.aTextureCoord); -} +}; /* @@ -78,12 +75,12 @@ PIXI.CompileVertexShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.VERTEX_SHADER); -} +}; PIXI.CompileFragmentShader = function(gl, shaderSrc) { return PIXI._CompileShader(gl, shaderSrc, gl.FRAGMENT_SHADER); -} +}; PIXI._CompileShader = function(gl, shaderSrc, shaderType) { @@ -93,29 +90,28 @@ gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { - console.log(gl.getShaderInfoLog(shader)); + window.console.log(gl.getShaderInfoLog(shader)); return null; } return shader; -} - +}; PIXI.compileProgram = function(vertexSrc, fragmentSrc) { var gl = PIXI.gl; var fragmentShader = PIXI.CompileFragmentShader(gl, fragmentSrc); var vertexShader = PIXI.CompileVertexShader(gl, vertexSrc); - - var shaderProgram = gl.createProgram(); - - gl.attachShader(shaderProgram, vertexShader); - gl.attachShader(shaderProgram, fragmentShader); - gl.linkProgram(shaderProgram); - if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { - console.log("Could not initialise shaders"); - } + var shaderProgram = gl.createProgram(); + + gl.attachShader(shaderProgram, vertexShader); + gl.attachShader(shaderProgram, fragmentShader); + gl.linkProgram(shaderProgram); + + if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { + window.console.log("Could not initialise shaders"); + } return shaderProgram; -} +}; diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index 128c217..fb5fb8c 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,7 +3,7 @@ */ /** - * A Text Object will create a line(s) of text using bitmap font. To split a line you can use "\n", "\r" or "\r\n" + * A Text Object will create a line(s) of text using bitmap font. To split a line you can use '\n', '\r' or '\r\n' * You can generate the fnt files using * http://www.angelcode.com/products/bmfont/ for windows or * http://www.bmglyph.com/ for mac. @@ -13,8 +13,8 @@ * @constructor * @param text {String} The copy that you would like the text to display * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText = function(text, style) { @@ -23,8 +23,7 @@ this.setText(text); this.setStyle(style); this.updateText(); - this.dirty = false - + this.dirty = false; }; // constructor @@ -39,7 +38,7 @@ */ PIXI.BitmapText.prototype.setText = function(text) { - this.text = text || " "; + this.text = text || ' '; this.dirty = true; }; @@ -48,16 +47,16 @@ * * @method setStyle * @param style {Object} The style parameters - * @param style.font {String} The size (optional) and bitmap font id (required) eq "Arial" or "20px Arial" (must have loaded previously) - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") + * @param style.font {String} The size (optional) and bitmap font id (required) eq 'Arial' or '20px Arial' (must have loaded previously) + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') */ PIXI.BitmapText.prototype.setStyle = function(style) { style = style || {}; - style.align = style.align || "left"; + style.align = style.align || 'left'; this.style = style; - var font = style.font.split(" "); + var font = style.font.split(' '); this.fontName = font[font.length - 1]; this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; @@ -100,7 +99,7 @@ if(prevCharCode && charData[prevCharCode]) { - pos.x += charData.kerning[prevCharCode]; + pos.x += charData.kerning[prevCharCode]; } chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; @@ -115,11 +114,11 @@ for(i = 0; i <= line; i++) { var alignOffset = 0; - if(this.style.align == "right") + if(this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } @@ -128,7 +127,7 @@ for(i = 0; i < chars.length; i++) { - var c = new PIXI.Sprite(chars[i].texture)//PIXI.Sprite.fromFrame(chars[i].charCode); + var c = new PIXI.Sprite(chars[i].texture); //PIXI.Sprite.fromFrame(chars[i].charCode); c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; c.position.y = chars[i].position.y * scale; c.scale.x = c.scale.y = scale; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index f708d85..75d50d0 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -3,25 +3,25 @@ */ /** - * A Text Object will create a line(s) of text to split a line you can use "\n" + * A Text Object will create a line(s) of text to split a line you can use '\n' * * @class Text * @extends Sprite * @constructor * @param text {String} The copy that you would like the text to display * @param [style] {Object} The style parameters - * @param [style.font] {String} default "bold 20pt Arial" The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font] {String} default 'bold 20pt Arial' The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap */ PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - this.context = this.canvas.getContext("2d"); + this.canvas = document.createElement('canvas'); + this.context = this.canvas.getContext('2d'); PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); this.setText(text); @@ -40,10 +40,10 @@ * * @method setStyle * @param [style] {Object} The style parameters - * @param [style.font="bold 20pt Arial"] {String} The style and size of the font - * @param [style.fill="black"] {Object} A canvas fillstyle that will be used on the text eg "red", "#00FF00" - * @param [style.align="left"] {String} An alignment of the multiline text ("left", "center" or "right") - * @param [style.stroke="black"] {String} A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param [style.font='bold 20pt Arial'] {String} The style and size of the font + * @param [style.fill='black'] {Object} A canvas fillstyle that will be used on the text eg 'red', '#00FF00' + * @param [style.align='left'] {String} An alignment of the multiline text ('left', 'center' or 'right') + * @param [style.stroke='black'] {String} A canvas fillstyle that will be used on the text stroke eg 'blue', '#FCFF00' * @param [style.strokeThickness=0] {Number} A number that represents the thickness of the stroke. Default is 0 (no stroke) * @param [style.wordWrap=false] {Boolean} Indicates if word wrap should be used * @param [style.wordWrapWidth=100] {Number} The width at which text will wrap @@ -51,10 +51,10 @@ PIXI.Text.prototype.setStyle = function(style) { style = style || {}; - style.font = style.font || "bold 20pt Arial"; - style.fill = style.fill || "black"; - style.align = style.align || "left"; - style.stroke = style.stroke || "black"; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 + style.font = style.font || 'bold 20pt Arial'; + style.fill = style.fill || 'black'; + style.align = style.align || 'left'; + style.stroke = style.stroke || 'black'; //provide a default, see: https://github.com/GoodBoyDigital/pixi.js/issues/136 style.strokeThickness = style.strokeThickness || 0; style.wordWrap = style.wordWrap || false; style.wordWrapWidth = style.wordWrapWidth || 100; @@ -63,14 +63,14 @@ }; /** - * Set the copy for the text object. To split a line you can use "\n" + * Set the copy for the text object. To split a line you can use '\n' * * @method setText * @param {String} text The copy that you would like the text to display */ PIXI.Text.prototype.setText = function(text) { - this.text = text.toString() || " "; + this.text = text.toString() || ' '; this.dirty = true; }; @@ -105,7 +105,7 @@ this.canvas.width = maxLineWidth + this.style.strokeThickness; //calculate text height - var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + var lineHeight = this.determineFontHeight('font: ' + this.style.font + ';') + this.style.strokeThickness; this.canvas.height = lineHeight * lines.length; //set canvas text styles @@ -115,18 +115,18 @@ this.context.strokeStyle = this.style.stroke; this.context.lineWidth = this.style.strokeThickness; - this.context.textBaseline = "top"; + this.context.textBaseline = 'top'; //draw lines line by line for (i = 0; i < lines.length; i++) { var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); - if(this.style.align == "right") + if(this.style.align === 'right') { linePosition.x += maxLineWidth - lineWidths[i]; } - else if(this.style.align == "center") + else if(this.style.align === 'center') { linePosition.x += (maxLineWidth - lineWidths[i]) / 2; } @@ -197,11 +197,11 @@ if(!result) { - var body = document.getElementsByTagName("body")[0]; - var dummy = document.createElement("div"); - var dummyText = document.createTextNode("M"); + var body = document.getElementsByTagName('body')[0]; + var dummy = document.createElement('div'); + var dummyText = document.createTextNode('M'); dummy.appendChild(dummyText); - dummy.setAttribute("style", fontStyle + ';position:absolute;top:0;left:0'); + dummy.setAttribute('style', fontStyle + ';position:absolute;top:0;left:0'); body.appendChild(dummy); result = dummy.offsetHeight; @@ -225,34 +225,34 @@ { // Greedy wrapping algorithm that will wrap words as the line grows longer // than its horizontal bounds. - var result = ""; - var lines = text.split("\n"); + var result = ''; + var lines = text.split('\n'); for (var i = 0; i < lines.length; i++) { var spaceLeft = this.style.wordWrapWidth; - var words = lines[i].split(" "); + var words = lines[i].split(' '); for (var j = 0; j < words.length; j++) { var wordWidth = this.context.measureText(words[j]).width; - var wordWidthWithSpace = wordWidth + this.context.measureText(" ").width; + var wordWidthWithSpace = wordWidth + this.context.measureText(' ').width; if(wordWidthWithSpace > spaceLeft) { // Skip printing the newline if it's the first word of the line that is // greater than the word wrap width. if(j > 0) { - result += "\n"; + result += '\n'; } - result += words[j] + " "; + result += words[j] + ' '; spaceLeft = this.style.wordWrapWidth - wordWidth; } else { spaceLeft -= wordWidthWithSpace; - result += words[j] + " "; + result += words[j] + ' '; } } - result += "\n"; + result += '\n'; } return result; }; diff --git a/src/pixi/textures/BaseTexture.js b/src/pixi/textures/BaseTexture.js index 6c9a83c..317e4e0 100644 --- a/src/pixi/textures/BaseTexture.js +++ b/src/pixi/textures/BaseTexture.js @@ -69,7 +69,7 @@ { var scope = this; - this.source.onload = function(){ + this.source.onload = function() { scope.hasLoaded = true; scope.width = scope.source.width; @@ -78,7 +78,7 @@ // add it to somewhere... PIXI.texturesToUpdate.push(scope); scope.dispatchEvent( { type: 'loaded', content: scope } ); - } + }; // this.image.src = imageUrl; } } @@ -93,7 +93,7 @@ this.imageUrl = null; this._powerOf2 = false; -} +}; PIXI.BaseTexture.prototype.constructor = PIXI.BaseTexture; @@ -106,17 +106,17 @@ { if(this.source instanceof Image) { - if (this.imageUrl in PIXI.BaseTextureCache) + if (this.imageUrl in PIXI.BaseTextureCache) delete PIXI.BaseTextureCache[this.imageUrl]; this.imageUrl = null; this.source.src = null; } this.source = null; PIXI.texturesToDestroy.push(this); -} +}; /** - * + * * * @method destroy */ @@ -126,7 +126,7 @@ this.hasLoaded = false; this.source.src = null; this.source.src = newSrc; -} +}; /** * Helper function that returns a base texture based on an image url @@ -156,4 +156,4 @@ } return baseTexture; -} +}; diff --git a/src/pixi/textures/RenderTexture.js b/src/pixi/textures/RenderTexture.js index c7451df..fe1df38 100644 --- a/src/pixi/textures/RenderTexture.js +++ b/src/pixi/textures/RenderTexture.js @@ -5,11 +5,11 @@ /** A RenderTexture is a special texture that allows any pixi displayObject to be rendered to it. - __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded. - Otherwise black rectangles will be drawn instead. - + __Hint__: All DisplayObjects (exmpl. Sprites) that renders on RenderTexture should be preloaded. + Otherwise black rectangles will be drawn instead. + RenderTexture takes snapshot of DisplayObject passed to render method. If DisplayObject is passed to render method, position and rotation of it will be ignored. For example: - + var renderTexture = new PIXI.RenderTexture(800, 600); var sprite = PIXI.Sprite.fromImage("spinObj_01.png"); sprite.position.x = 800/2; @@ -39,7 +39,7 @@ this.indetityMatrix = PIXI.mat3.create(); - this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); + this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); if(PIXI.gl) { @@ -49,7 +49,7 @@ { this.initCanvas(); } -} +}; PIXI.RenderTexture.prototype = Object.create( PIXI.Texture.prototype ); PIXI.RenderTexture.prototype.constructor = PIXI.RenderTexture; @@ -68,7 +68,7 @@ gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); this.glFramebuffer.width = this.width; - this.glFramebuffer.height = this.height; + this.glFramebuffer.height = this.height; this.baseTexture = new PIXI.BaseTexture(); @@ -95,7 +95,7 @@ // set the correct render function.. this.render = this.renderWebGL; -} +}; PIXI.RenderTexture.prototype.resize = function(width, height) @@ -103,24 +103,24 @@ this.width = width; this.height = height; - + if(PIXI.gl) { - this.projection.x = this.width/2 - this.projection.y = -this.height/2; - + this.projection.x = this.width / 2; + this.projection.y = -this.height / 2; + var gl = PIXI.gl; gl.bindTexture(gl.TEXTURE_2D, this.baseTexture._glTexture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); } else { - - this.frame.width = this.width + + this.frame.width = this.width; this.frame.height = this.height; this.renderer.resize(this.width, this.height); } -} +}; /** * Initializes the canvas data for this texture @@ -136,7 +136,7 @@ this.frame = new PIXI.Rectangle(0, 0, this.width, this.height); this.render = this.renderCanvas; -} +}; /** * This function will draw the display object to the texture. @@ -151,15 +151,15 @@ var gl = PIXI.gl; // enable the alpha color mask.. - gl.colorMask(true, true, true, true); + gl.colorMask(true, true, true, true); - gl.viewport(0, 0, this.width, this.height); + gl.viewport(0, 0, this.width, this.height); gl.bindFramebuffer(gl.FRAMEBUFFER, this.glFramebuffer ); if(clear) { - gl.clearColor(0,0,0, 0); + gl.clearColor(0,0,0, 0); gl.clear(gl.COLOR_BUFFER_BIT); } @@ -178,20 +178,20 @@ displayObject.worldTransform[2] = position.x; displayObject.worldTransform[5] -= position.y; } - + PIXI.visibleCount++; displayObject.vcount = PIXI.visibleCount; - + for(var i=0,j=children.length; i this.baseTexture.width || frame.y + frame.height > this.baseTexture.height) { - throw new Error("Texture Error: frame does not fit inside the base Texture dimensions " + this); + throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this); } this.updateFrame = true; PIXI.Texture.frameUpdates.push(this); //this.dispatchEvent( { type: 'update', content: this } ); -} +}; /** * Helper function that returns a texture based on an image url @@ -145,7 +145,7 @@ } return texture; -} +}; /** * Helper function that returns a texture based on a frame id @@ -159,9 +159,9 @@ PIXI.Texture.fromFrame = function(frameId) { var texture = PIXI.TextureCache[frameId]; - if(!texture)throw new Error("The frameId '"+ frameId +"' does not exist in the texture cache " + this); + if(!texture) throw new Error('The frameId "' + frameId + '" does not exist in the texture cache ' + this); return texture; -} +}; /** * Helper function that returns a texture based on a canvas element @@ -176,7 +176,7 @@ { var baseTexture = new PIXI.BaseTexture(canvas); return new PIXI.Texture(baseTexture); -} +}; /** @@ -190,7 +190,7 @@ PIXI.Texture.addTextureToCache = function(texture, id) { PIXI.TextureCache[id] = texture; -} +}; /** * Remove a texture from the textureCache. @@ -202,11 +202,10 @@ */ PIXI.Texture.removeTextureFromCache = function(id) { - var texture = PIXI.TextureCache[id] + var texture = PIXI.TextureCache[id]; PIXI.TextureCache[id] = null; return texture; -} +}; // this is more for webGL.. it contains updated frames.. PIXI.Texture.frameUpdates = []; - diff --git a/src/pixi/utils/Detector.js b/src/pixi/utils/Detector.js index 2bc7d34..535a94f 100644 --- a/src/pixi/utils/Detector.js +++ b/src/pixi/utils/Detector.js @@ -23,14 +23,20 @@ if(!height)height = 600; // BORROWED from Mr Doob (mrdoob.com) - var webgl = ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )(); + var webgl = ( function () { try { + var canvas = document.createElement( 'canvas' ); + return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); + } catch( e ) { + return false; + } + } )(); if(webgl) { - var ie = (navigator.userAgent.toLowerCase().indexOf('msie') != -1); - webgl = !ie; + var ie = (navigator.userAgent.toLowerCase().indexOf('msie') !== -1); + webgl = !ie; } - + //console.log(webgl); if( webgl ) { diff --git a/src/pixi/utils/Polyk.js b/src/pixi/utils/Polyk.js index 0b1a136..8c5d30e 100644 --- a/src/pixi/utils/Polyk.js +++ b/src/pixi/utils/Polyk.js @@ -44,11 +44,12 @@ { var sign = true; - var n = p.length>>1; - if(n<3) return []; + var n = p.length >> 1; + if(n < 3) return []; + var tgs = []; var avl = []; - for(var i=0; i= 0) && (v >= 0) && (u + v < 1); -} +}; /** * Checks if a shape is convex @@ -145,5 +152,5 @@ */ 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; +}; diff --git a/src/pixi/utils/Utils.js b/src/pixi/utils/Utils.js index 6a64805..4551722 100644 --- a/src/pixi/utils/Utils.js +++ b/src/pixi/utils/Utils.js @@ -18,13 +18,13 @@ var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { - window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; - window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || - window[vendors[x]+'CancelRequestAnimationFrame']; + window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || + window[vendors[x] + 'CancelRequestAnimationFrame']; } -if (!window.requestAnimationFrame) - window.requestAnimationFrame = function(callback, element) { +if (!window.requestAnimationFrame) { + window.requestAnimationFrame = function(callback) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, @@ -32,11 +32,13 @@ lastTime = currTime + timeToCall; return id; }; +} -if (!window.cancelAnimationFrame) +if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; +} window.requestAnimFrame = window.requestAnimationFrame; @@ -46,36 +48,36 @@ * @method hex2rgb * @param hex {Number} */ -function hex2rgb(hex) { +PIXI.hex2rgb = function hex2rgb(hex) { return [(hex >> 16 & 0xFF) / 255, ( hex >> 8 & 0xFF) / 255, (hex & 0xFF)/ 255]; -} +}; /** * A polyfill for Function.prototype.bind * * @method bind */ -if (typeof Function.prototype.bind != 'function') { - Function.prototype.bind = (function () { - var slice = Array.prototype.slice; - return function (thisArg) { - var target = this, boundArgs = slice.call(arguments, 1); +if (typeof Function.prototype.bind !== 'function') { + Function.prototype.bind = (function () { + var slice = Array.prototype.slice; + return function (thisArg) { + var target = this, boundArgs = slice.call(arguments, 1); - if (typeof target != 'function') throw new TypeError(); + if (typeof target !== 'function') throw new TypeError(); - function bound() { - var args = boundArgs.concat(slice.call(arguments)); - target.apply(this instanceof bound ? this : thisArg, args); - } + function bound() { + var args = boundArgs.concat(slice.call(arguments)); + target.apply(this instanceof bound ? this : thisArg, args); + } - bound.prototype = (function F(proto) { - if (proto) F.prototype = proto; - if (!(this instanceof F)) return new F(); - })(target.prototype); + bound.prototype = (function F(proto) { + if (proto) F.prototype = proto; + if (!(this instanceof F)) return new F(); + })(target.prototype); - return bound; - }; - })(); + return bound; + }; + })(); } /** @@ -84,57 +86,57 @@ * @class AjaxRequest * @constructor */ -var AjaxRequest = PIXI.AjaxRequest = function() +PIXI.AjaxRequest = function AjaxRequest() { - var activexmodes = ["Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Microsoft.XMLHTTP"] //activeX versions to check for in IE + var activexmodes = ['Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.3.0', 'Microsoft.XMLHTTP']; //activeX versions to check for in IE if (window.ActiveXObject) { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) for (var i=0; i>>>>>>>>") - console.log("_") + window.console.log('>>>>>>>>>'); + window.console.log('_'); var safe = 0; var tmp = item.first; - console.log(tmp); + window.console.log(tmp); while(tmp._iNext) { safe++; tmp = tmp._iNext; - console.log(tmp); + window.console.log(tmp); // console.log(tmp); if(safe > 100) { - console.log("BREAK") - break + window.console.log('BREAK'); + break; } } -} +};